Qué son las Funciones en JavaScript

🐱‍💻 Ventajas del uso de funciones son las siguientes:
✔ Reducción de código
✔ Legibilidad del programa
✔ Facilidad en la depuración
✔ Mantenimiento

Dejo mi aporte

(

Primero una etiqueta de CSS
<style>
* { padding: 0; margin: 0; }
canvas { background: rgb(85, 83, 83); }
</style>

código de javascript para la figura

var d = document.getElementById(“lobo”);
var lienzo = d.getContext(“2d”);

dibujarLinea("#F8F8FF", 560, 140, 548, 133);
dibujarLinea("#F8F8FF",548,133,520, 120);
dibujarLinea("#F8F8FF",520,120,513,110);
dibujarLinea("#F8F8FF",513,110,505,100);
dibujarLinea("#F8F8FF",505,100,490,88);
dibujarLinea("#F8F8FF",490,88,490,40);
dibujarLinea("#F8F8FF",490,40,460,70);
dibujarLinea("#F8F8FF",460,70,430,90);
dibujarLinea("#F8F8FF",430,90,460,120);
dibujarLinea("#F8F8FF",490,88,460,120);
dibujarLinea("#F8F8FF",505,100,460,120);
dibujarLinea("#F8F8FF",520,120,460,120);
dibujarLinea("#F8F8FF",513,110,500,120);
dibujarLinea("#F8F8FF",548,133,515,133);
dibujarLinea("#F8F8FF",515,133,460,120);
dibujarLinea("#F8F8FF",515,133,500,170);
dibujarLinea("#F8F8FF",548,133,545,140);
dibujarLinea("#F8F8FF",545,140,558,145);
dibujarLinea("#F8F8FF",560,140,550,170);
dibujarLinea("#F8F8FF",550,170,500,170);
dibujarLinea("#F8F8FF",500,170,460,120);
dibujarLinea("#F8F8FF",430,90,370,170);
dibujarLinea("#F8F8FF",460,120,370,170);
dibujarLinea("#F8F8FF",370,170,435,200);
dibujarLinea("#F8F8FF",430,136,435,200);
dibujarLinea("#F8F8FF",500,170,435,200);
dibujarLinea("#F8F8FF",500,170,495,210);
dibujarLinea("#F8F8FF",495,210,435,200);
dibujarLinea("#F8F8FF",495,210,440,300);
dibujarLinea("#F8F8FF",440,300,435,200);
dibujarLinea("#F8F8FF",440,300,400,260);
dibujarLinea("#F8F8FF",400,260,435,200);
dibujarLinea("#F8F8FF",400,260,370,170);
dibujarLinea("#F8F8FF",370,170,350,220);
dibujarLinea("#F8F8FF",350,220,400,260);
dibujarLinea("#F8F8FF",370,170,290,170);
dibujarLinea("#F8F8FF",290,170,350,220);
dibujarLinea("#F8F8FF",290,170,365,330);
dibujarLinea("#F8F8FF",440,300,405,340);
dibujarLinea("#F8F8FF",405,340,380,310);
dibujarLinea("#F8F8FF",380,310,400,260);
dibujarLinea("#F8F8FF",380,310,365,330);
dibujarLinea("#F8F8FF",350,220,342,280);
dibujarLinea("#F8F8FF",290,170,200,160);
dibujarLinea("#F8F8FF",200,160,120,180);
dibujarLinea("#F8F8FF",200,160,240,220);
dibujarLinea("#F8F8FF",240,220,332,260);
dibujarLinea("#F8F8FF",332,260,240,300);
dibujarLinea("#F8F8FF",240,220,240,300);
dibujarLinea("#F8F8FF",240,300,290,320);
dibujarLinea("#F8F8FF",290,320,365,330);
dibujarLinea("#F8F8FF",120,180,240,220);
dibujarLinea("#F8F8FF",120,180,70,240);
dibujarLinea("#F8F8FF",70,240,40,330);
dibujarLinea("#F8F8FF",40,330,45,410);
dibujarLinea("#F8F8FF",45,410,65,400);
dibujarLinea("#F8F8FF",65,400,118,325);
dibujarLinea("#F8F8FF",118,325,122,230);
dibujarLinea("#F8F8FF",155,191,40,330);
dibujarLinea("#F8F8FF",66,298,65,400);
dibujarLinea("#F8F8FF",122,230,90,365);
dibujarLinea("#F8F8FF",120,260,185,260);
dibujarLinea("#F8F8FF",185,260,240,220);
dibujarLinea("#F8F8FF",185,260,200,360);
dibujarLinea("#F8F8FF",200,360,240,300);
dibujarLinea("#F8F8FF",200,360,145,310);
dibujarLinea("#F8F8FF",145,310,120,260);
dibujarLinea("#F8F8FF",200,360,160,400);
dibujarLinea("#F8F8FF",145,310,125,400);
dibujarLinea("#F8F8FF",125,400,160,400);
dibujarLinea("#F8F8FF",145,310,110,375);
dibujarLinea("#F8F8FF",110,375,130,470);
dibujarLinea("#F8F8FF",135,288,110,375);
dibujarLinea("#F8F8FF",125,400,140,470);
dibujarLinea("#F8F8FF",125,400,175,470);
dibujarLinea("#F8F8FF",160,400,175,470);
dibujarLinea("#F8F8FF",130,470,140,470);
dibujarLinea("#F8F8FF",140,470,155,490);
dibujarLinea("#F8F8FF",175,470,190,475);
dibujarLinea("#F8F8FF",155,490,190,475);
dibujarLinea("#F8F8FF",155,490,190,500);
dibujarLinea("#F8F8FF",190,475,210,490);
dibujarLinea("#F8F8FF",190,500,210,490);
dibujarLinea("#F8F8FF",380,310,385,370);
dibujarLinea("#F8F8FF",385,370,390,420);
dibujarLinea("#F8F8FF",390,420,395,460);
dibujarLinea("#F8F8FF",405,340,395,460);
dibujarLinea("#F8F8FF",365,330,365,440);
dibujarLinea("#F8F8FF",365,440,385,385);
dibujarLinea("#F8F8FF",395,460,425,492);
dibujarLinea("#F8F8FF",405,470,420,470);
dibujarLinea("#F8F8FF",420,470,425,492);
dibujarLinea("#F8F8FF",365,440,395,495);
dibujarLinea("#F8F8FF",425,492,395,495);
dibujarLinea("#F8F8FF",395,460,395,495);
dibujarLinea("#F8F8FF",395,495,375,500);
dibujarLinea("#F8F8FF",375,500,355,455);
dibujarLinea("#F8F8FF",355,455,346,328);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal){
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

Al fin pude hacerlo como quería y así quedo

<code>
```var d = document.getElementById("dibujo");
var lienzo = d.getContext("2d");
function dibujar(color, x_inicial, y_inicial, x_final, y_final) //dentro del parentesis van los parametros de la funcion
{ //lo que va dentro del bloque de codigo es el codigo que se va a repetir cada vez que la funcion es invocada
  lienzo.beginPath();
  lienzo.strokeStyle=color;
  lienzo.moveTo(x_inicial, y_inicial);
  lienzo.lineTo(x_final, y_final);
  lienzo.stroke();
  lienzo.closePath();
}
function rellenar(color, relleno, x1, y1, x2, y2, x3, y3, x4, y4, x5, y5)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.fillStyle = relleno;
  lienzo.moveTo(x1, y1);
  lienzo.lineTo(x2, y2);
  lienzo.lineTo(x3, y3);
  lienzo.lineTo(x4, y4);
  lienzo.lineTo(x5, y5);
  lienzo.stroke();
  lienzo.fill();
  lienzo.closePath();

}
function ojos(color, x, y, r, inicio, final, direccion)
{
  lienzo.beginPath();
  lienzo.strokeStyle=color;
  lienzo.arc(x,y,r,inicio,final,direccion);
  lienzo.stroke();
  lienzo.closePath();
}
dibujar("blak",150, 20, 110, 30);
dibujar("blak", 130, 35, 110, 30);
dibujar("blak", 150, 20, 130, 35);
dibujar("blak", 150, 20, 170, 35);
dibujar("blak", 130, 35, 170, 35);
dibujar("blak", 150, 20, 190, 30);
dibujar("blak", 190, 30, 170, 35);
dibujar("blak", 110, 30, 110, 50);
dibujar("blak", 110, 50, 130, 35);
dibujar("blak", 110, 50, 125, 60);
dibujar("blak", 125, 60, 130, 35);
dibujar("blak", 125, 60, 150, 80);
dibujar("blak", 130, 35, 148, 70);
dibujar("blak", 170, 35, 152, 70);
dibujar("blak", 170, 35, 180, 60);
dibujar("blak", 180, 60, 150, 80);
dibujar("blak", 170, 35, 190, 50);
dibujar("blak", 190, 50, 180, 60);
dibujar("blak", 190, 30, 190, 50);
dibujar("blak", 120, 17, 130, 25);
dibujar("blak", 170, 25, 180, 17);
dibujar("blak", 125, 60, 130, 170);
dibujar("blak", 125, 60, 150, 155);
dibujar("blak", 130, 170, 135, 100);
dibujar("blak", 150, 155, 150, 80);
dibujar("blak", 150, 80, 135, 100);
dibujar("blak", 150, 155, 175, 63);
dibujar("blak", 175, 63, 165, 170);
dibujar("blak", 150, 80, 165, 100);
dibujar("blak", 165, 100,165, 170);
dibujar("blak", 175, 63, 200, 100);
dibujar("blak", 200, 100, 200, 150);
dibujar("blak", 200, 150, 165, 170);
dibujar("blak", 200, 100, 165, 170);
dibujar("blak", 200, 150, 190, 170);
dibujar("blak", 190, 170, 165, 170);
dibujar("blak", 200, 150, 230, 170);
dibujar("blak", 190, 170, 230, 170);
dibujar("blak", 200, 150, 245, 167);
dibujar("blak", 245, 167, 230, 170);
//nariz
rellenar("blak","blak",  145, 75, 148, 70, 152, 70, 155, 75, 150, 80);
//oreja izquierda
rellenar("blak","blak", 120, 17, 110, 30, 110, 10);
//oreja derecha
rellenar("blak","blak", 190, 30, 190, 10, 180, 17);
//patas
rellenar("blak","blak", 130, 170, 150, 155, 165, 170);
//cola
rellenar("blak","blak", 245, 167, 230, 152, 232, 162);

//ojos
ojos("black", 133,55,5, Math.PI*2,Math.PI*1,false);
ojos("black",168,55,5,Math.PI*2,Math.PI*1,false);

con menos codigo y mas detalle xd

Me tardé mucho. Pero valió la pena c:

<code<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style>
    body
    {
      background-color:#13172E;
      color: white;
      font.family: helvetica;
    }
    </style>
    <title> Dibujando con canvas </title>
  </head>
  <body>
    <h1> Dibujo en canvas </h1>
    <canvas width = "300" height = "300" id="dibujito"> </canvas>
    <p> DEBO DEJAR DE VER TANTOS VIDEOS DE FREDDY O ME VOY A ENAMORAR</p>
    <script src= "dibujo.js"></script>
  </body>
</html>
>

`var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);

dibujarLinea (“blue”,28,48,28,94)
dibujarLinea (“blue”,28,48,51,48)
dibujarLinea (“blue”,28,72,50,72)
dibujarLinea (“blue”,70,48,70,97)
dibujarLinea (“blue”,70,48,86,51)
dibujarLinea (“blue”,86,51,94,60)
dibujarLinea (“blue”,94,60,89,69)
dibujarLinea (“blue”,89,69,80,73)
dibujarLinea (“blue”,80,73,70,73)
dibujarLinea (“blue”,115,50,115,95)
dibujarLinea (“blue”,115,50,139,50)
dibujarLinea (“blue”,115,72,139,72)
dibujarLinea (“blue”,115,95,139,96)
dibujarLinea (“blue”,83,73,97,97)
dibujarLinea (“blue”,155,49,171,51)
dibujarLinea (“blue”,171,51,182,57)
dibujarLinea (“blue”,182,57,185,70)
dibujarLinea (“blue”,185,70,184,81)
dibujarLinea (“blue”,184,81,179,91)
dibujarLinea (“blue”,179,91,171,95)
dibujarLinea (“blue”,153,95,155,49)

dibujarLinea (“blue”,171,95,153,95)

dibujarLinea (“blue”,199,50,214,50)
dibujarLinea (“blue”,214,50,224,55)
dibujarLinea (“blue”,224,55,229,56)
dibujarLinea (“blue”,229,64,230,74)
dibujarLinea (“blue”,230,74,226,86)
dibujarLinea (“blue”,226,86,218,94)
dibujarLinea (“blue”,218,94,206,95)
dibujarLinea (“blue”,206,95,199,95)
dibujarLinea (“blue”,199,95,199,50)
dibujarLinea (“blue”,239,50,258,77)
dibujarLinea (“blue”,258,77,275,50)
dibujarLinea (“blue”,258,77,258,97)
dibujarLinea (“red”,166,169,178,151)
dibujarLinea (“red”,178,151,193,142)
dibujarLinea (“red”,193,142,211,145)
dibujarLinea (“red”,211,145,223,165)
dibujarLinea (“red”,223,165,224,185)
dibujarLinea (“red”,224,185,213,206)
dibujarLinea (“red”,213,206,196,226)
dibujarLinea (“red”,196,226,180,238)
dibujarLinea (“red”,180,238,166,247)
dibujarLinea (“red”,166,247,145,236)
dibujarLinea (“red”,145,236,112,201)
dibujarLinea (“red”,112,201,106,184)
dibujarLinea (“red”,106,184,106,163)
dibujarLinea (“red”,106,163,113,148)
dibujarLinea (“red”,113,148,128,141)
dibujarLinea (“red”,128,141,142,143)
dibujarLinea (“red”,142,143,157,153)
dibujarLinea (“red”,157,153,160,162)
dibujarLinea (“red”,160,162,166,169)

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

```

Este ejercicio me recuerda a los gráficos de Star Fox.

dibujarLinea("black", 191, 163, 223, 82);
dibujarLinea("black", 223, 82, 291, 24);
dibujarLinea("black", 291, 24, 191, 163);
dibujarLinea("black", 191, 163, 237, 105);
dibujarLinea("black", 237, 105, 291, 24);
dibujarLinea("black", 9, 182, 147, 154);
dibujarLinea("black", 147, 154, 209, 116);
dibujarLinea("black", 209, 116, 9, 182);
dibujarLinea("black", 9, 182, 211, 111);
dibujarLinea("black", 214, 104, 153, 101);
dibujarLinea("black", 153, 101, 9, 182);
dibujarLinea("black", 153, 101, 141, 102);
dibujarLinea("black", 141, 102, 9, 182);
dibujarLinea("black", 142, 101, 187, 60);
dibujarLinea("black", 187, 60, 196, 60);
dibujarLinea("black", 196, 60, 152, 101);
dibujarLinea("black", 197, 60, 198, 60);
dibujarLinea("black", 198, 60, 217, 94);
dibujarLinea("black", 220, 88, 216, 70);
dibujarLinea("black", 216, 70, 199, 60);
dibujarLinea("black", 127, 110, 137, 85);
dibujarLinea("black", 137, 85, 148, 95);
dibujarLinea("black", 137, 85, 178, 30);
dibujarLinea("black", 178, 30, 170, 75);
dibujarLinea("black", 241, 104, 340, 97);
dibujarLinea("black", 238, 105, 403, 93);
dibujarLinea("black", 403, 93, 285, 111);
dibujarLinea("black", 285, 111, 254, 105);
dibujarLinea("black", 254, 105, 241, 116);
dibujarLinea("black", 241, 116, 229, 116);
dibujarLinea("black", 233, 111, 241, 110);
dibujarLinea("black", 241, 110, 240, 116);
dibujarLinea("black", 251, 108, 284, 111);

Me costó un poquito bastante, fue ensayo y error, pero logré esto 😄

Mis apuntes de la Clase:

• Funciones => Son herramientas utilizadas en cualquier lenguaje, con la finalidad de reutilizar código, con lo cual se evita reescribir varias veces el código, en el caso que un cierto bloqyue del mismo deba repetirse en varias secciones del código.
• Dentro de una función se pueden crear y utilizar variables locales, es decir, se crean, utilizan y destruyen dentro de la función, esto se logra pasando a la función como parámetros del mismo según lo que necesite la función.
• Las funciones no tienen un lugar definido dentro del programa, estas pueden ser declaradas y descritas al inicio , final, o en cualquier parte del cuerpo del programa, esto se debe a que JS en primer lugar hace una lectura completa dle programa, y en primer lugar ejecuta y pone en memoria solo las funciones, para después ir ejecutando el cuerpo del programa.
• La principal ventaja, aparte de ordenar el código, hace que sea mas facil de mantener, ya que si se debe realizar algún ajuste, este solo se realiza en solo una parte del código.

gente llevo 4 horas intentando dibujar en canvas… no sabia que me habia pasado volvi a ver desde el principio toda la clase busque en internet INTENTE DE TODO hasta que despues de esas 4 horas me di cuenta que puse un punto y coma enves de una coma en FUNCTION

Resumen:la mejor forma de aprender es cometer errores

Genial!

Hice un carpincho ❤️

I’m love code

No me rendiré hasta ser un programador de alto rendimiento ¡¡¡¡

Así quedo mi dibujo pero tengo unas dudas las partes que van en rojo tenían que ir rellenas pero no pude lograrlo podrían decirme donde esta el error en mi código y de igual manera los ojos no los pude hacer en función, los tuve que hacer cada uno por separado podrían decirme como puedo hacerlos en función

```

<code>

var d = document.getElementById(“dibujo”);
var lienzo = d.getContext(“2d”);
function dibujar(color, x_inicial, y_inicial, x_final, y_final) //dentro del parentesis van los parametros de la funcion
{ //lo que va dentro del bloque de codigo es el codigo que se va a repetir cada vez que la funcion es invocada
lienzo.beginPath();
lienzo.strokeStyle=color;
lienzo.moveTo(x_inicial, y_inicial);
lienzo.lineTo(x_final, y_final);
lienzo.stroke();
lienzo.closePath();
}
function rellenar(color, relleno, x_inicial, y_inicial, x_final, y_final)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.fillStyle = relleno;
lienzo.moveTo(x_inicial, y_inicial);
lienzo.lineTo(x_final,y_final);
lienzo.stroke();
lienzo.fill();
lienzo.closePath();

}
dibujar(“blue”,150, 20, 110, 30);
dibujar(“blue”, 130, 35, 110, 30);
dibujar(“blue”, 150, 20, 130, 35);
dibujar(“blue”, 150, 20, 170, 35);
dibujar(“blue”, 130, 35, 170, 35);
dibujar(“blue”, 150, 20, 190, 30);
dibujar(“blue”, 190, 30, 170, 35);
dibujar(“blue”, 110, 30, 110, 50);
dibujar(“blue”, 110, 50, 130, 35);
dibujar(“blue”, 110, 50, 125, 60);
dibujar(“blue”, 125, 60, 130, 35);
dibujar(“blue”, 125, 60, 150, 80);
dibujar(“blue”, 130, 35, 148, 70);
dibujar(“blue”, 170, 35, 152, 70);
dibujar(“blue”, 170, 35, 180, 60);
dibujar(“blue”, 180, 60, 150, 80);
dibujar(“blue”, 170, 35, 190, 50);
dibujar(“blue”, 190, 50, 180, 60);
dibujar(“blue”, 190, 30, 190, 50);
dibujar(“blue”, 120, 17, 130, 25);
dibujar(“blue”, 170, 25, 180, 17);
dibujar(“blue”, 125, 60, 130, 170);
dibujar(“blue”, 125, 60, 150, 155);
dibujar(“blue”, 130, 170, 135, 100);
dibujar(“blue”, 150, 155, 150, 80);
dibujar(“blue”, 150, 80, 135, 100);
dibujar(“blue”, 150, 155, 175, 63);
dibujar(“blue”, 175, 63, 165, 170);
dibujar(“blue”, 150, 80, 165, 100);
dibujar(“blue”, 165, 100,165, 170);
dibujar(“blue”, 175, 63, 200, 100);
dibujar(“blue”, 200, 100, 200, 150);
dibujar(“blue”, 200, 150, 165, 170);
dibujar(“blue”, 200, 100, 165, 170);
dibujar(“blue”, 200, 150, 190, 170);
dibujar(“blue”, 190, 170, 165, 170);
dibujar(“blue”, 200, 150, 230, 170);
dibujar(“blue”, 190, 170, 230, 170);
dibujar(“blue”, 200, 150, 245, 167);
dibujar(“blue”, 245, 167, 230, 170);
//nariz
rellenar(“red”,“blue”, 145, 75, 148, 70);
rellenar(“red”,“blue”, 148, 70, 152, 70);
rellenar(“red”,“blue”, 152, 70, 155, 75);
rellenar(“red”,“blue”, 145, 75, 150, 80);
rellenar(“red”,“blue”, 155, 75, 150, 80);
//oreja izquierda
rellenar(“red”, “blue”, 120, 17, 110, 30);
rellenar(“red”, “blue”, 110, 10, 110, 30);
rellenar(“red”, “blue”, 120, 17, 110, 10);
//oreja derecha
rellenar(“red”, “blue”, 190, 30, 190, 10);
rellenar(“red”, “blue”, 190, 30, 180, 17);
rellenar(“red”, “blue”, 180, 17, 190, 10);
//patas
rellenar(“red”, “blue”, 130, 170, 150, 155);
rellenar(“red”, “blue”, 165, 170, 150, 155);
rellenar(“red”, “blue”, 130, 170, 165, 170);
//cola
rellenar(“red”, “blue”, 245, 167, 230, 152);
rellenar(“red”, “blue”, 230, 152, 232, 162);

lienzo.beginPath();
lienzo.beginPath();
lienzo.strokeStyle=“blue”;
lienzo.arc(133,55,5,Math.PI2,Math.PI1,false);
lienzo.stroke();
lienzo.closePath()

lienzo.beginPath();
lienzo.beginPath();
lienzo.strokeStyle=“blue”;
lienzo.arc(168,55,5,Math.PI2,Math.PI1,false);
lienzo.stroke();
lienzo.closePath()

Les dejo mi código de dibujo creado con js, cree una función para dibujar las lineas de acuerdo a las coordenadas entregas, le recomiendo ir probando cada parámetro para que familiaricen con los comandos usados para dibujar en el canvas.

.- La forma de saber cuando debes ESCRIBIR UNA FUNCIÓNes cuando estas escribiendo mucho código repetitivo.

.- Se usa function. Se le definen variables de entrada, dentro del paréntesis.

.- Se coloca el código escrito anteriormente dentro de las llaves. Se eliminan los valores fijos y se colocan las variables.

.- NO IMPORTA dónde se escriba la function, ya que en memoria se leen primero todas las function. Así funciona JS.

,- Se INVOCA la función, pasándole valores tal como se definió. Se puede ver que responde tal como se espera.

.- Se vuelve a INVOCAR las función, con otros parametros, cambiando de color y puntos de inicio y fin. Se puede ver que tambien responde.

.- Tenemos el CÓDIGO ORGANIZADO, el html en .html, el JavaScript en .js. YA NO REPETIMOS CÓDIGO, sino que invocamos funciones creadas por nosotros mismos.

Muy buen ejercicio!

Mi nombre en Canvas 😃

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando con canvas</title>
    <style>
    body
    {
      background-color: black;
      color: white;
      font.family: helvetica;
    }
    </style>
  </head>
  <body>
    <h1>Dibujando en canvas</h1>
    <canvas width="300" height="300" id="dibujito"></canvas>
    <p>Asi queda tu dibujo</p>
    <script src="dibujo.js"></script>
  </body>
</html>

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}
dibujarLinea("red", 40, 110, 40, 100);
dibujarLinea("red", 40, 100, 10, 100);
dibujarLinea("red", 10, 100, 10, 120);
dibujarLinea("red", 10, 120, 40, 120);
dibujarLinea("red", 40, 120, 40, 140);
dibujarLinea("red", 40, 140, 10, 140);
dibujarLinea("red", 10, 140, 10, 130);

dibujarLinea("red", 65, 80, 65, 140);
dibujarLinea("red", 50, 100, 80, 100);

dibujarLinea("red", 120, 140, 90, 140);
dibujarLinea("red", 90, 140, 90, 100);
dibujarLinea("red", 90, 100, 120, 100);
dibujarLinea("red", 120, 100, 120, 120);
dibujarLinea("red", 120, 120, 90, 120);

dibujarLinea("red", 130, 140, 130, 100);
dibujarLinea("red", 130, 100, 160, 100);
dibujarLinea("red", 160, 100, 160, 120);
dibujarLinea("red", 160, 120, 130, 120);

dibujarLinea("red", 170, 80, 170, 140);
dibujarLinea("red", 170, 110, 200, 110);
dibujarLinea("red", 200, 110, 200, 140);

dibujarLinea("red", 210, 110, 210, 130);
dibujarLinea("red", 210, 130, 220, 140);
dibujarLinea("red", 220, 140, 230, 140);
dibujarLinea("red", 230, 140, 240, 130);
dibujarLinea("red", 240, 140, 240, 100);
dibujarLinea("red", 240, 110, 230, 100);
dibujarLinea("red", 230, 100, 220, 100);
dibujarLinea("red", 220, 100, 210, 110);

dibujarLinea("red", 250, 140, 250, 100);
dibujarLinea("red", 250, 100, 280, 140);
dibujarLinea("red", 280, 140, 280, 100);

dibujarLinea("red", 290, 140, 290, 100);

dibujarLinea("red", 285, 85, 295, 85);
dibujarLinea("red", 295, 85, 295, 75);
dibujarLinea("red", 295, 75, 285, 75);
dibujarLinea("red", 285, 75, 285, 85);

Les comparto mi dibujo, esto esta genial !!

hice una funcion que utiliza una funcion para hacer cuadrados.

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

function dibujar_linea(color,xinicial,yinicial,xfinal,yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujar_cuadrado(L,c)
{
  dibujar_linea(c,0,0,L,0); //arriba
  dibujar_linea(c,0,L,L,L);//abajo
  dibujar_linea(c,L,L,L,0);//lado derecho
  dibujar_linea(c,0,0,0,L); //lado izquierdo
}
 dibujar_cuadrado(300,"black");
 dibujar_linea("black",0,0,300,300);

ya le agarre el tiro jaja !!

Al canvas le pueden dar el estributo style con un background-color para notar mejor las lineas.

<canvas style="background-color: grey;"></canvas>

In the name of the M00N

var d = document.getElementById("dibujito"),
    lienzo = d.getContext("2d");

dibujarLinea("black", 230, 30, 215, 15);
dibujarLinea("black", 215, 15, 190, 05);
dibujarLinea("black", 190, 05, 165, 05);
dibujarLinea("black", 165, 05, 140, 15);
dibujarLinea("black", 140, 15, 120, 40);
dibujarLinea("black", 120, 40, 110, 75);
dibujarLinea("black", 110, 75, 110, 105);
dibujarLinea("black", 110, 105, 120, 140);
dibujarLinea("black", 120, 140, 140, 165);
dibujarLinea("black", 140, 165, 165, 180);
dibujarLinea("black", 165, 180, 190, 180);
dibujarLinea("black", 190, 180, 215, 170);
dibujarLinea("black", 215, 170, 230, 155);
dibujarLinea("black", 230, 155, 200, 150);
dibujarLinea("black", 200, 150, 180, 135);
dibujarLinea("black", 180, 135, 170, 105);
dibujarLinea("black", 170, 105, 170, 75);
dibujarLinea("black", 170, 75, 180, 55);
dibujarLinea("black", 180, 55, 200, 35);
dibujarLinea("black", 200, 35, 232, 30);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();
}

Dejo mi aporte para los fanaticos de los comics y la programacion

![](

tremendo ejercicio!

![](

Asi quedo mi proyecto espero practiquen

Estaba haciendo frió y pensé en navidad

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

dibujarArbol("green",150,50,100,100)
dibujarArbol("green",100,100,130,100)
dibujarArbol("green",130,100,80,150)
dibujarArbol("green",80,150,110,150)
dibujarArbol("green",110,150,60,200)
dibujarArbol("green",60,200,240,200)
dibujarArbol("green",240,200,190,150)
dibujarArbol("green",190,150,220,150)
dibujarArbol("green",220,150,170,100)
dibujarArbol("green",170,100,200,100)
dibujarArbol("green",200,100,150,50)

dibujarArbol("brown",140,200,140,240)
dibujarArbol("brown",140,240,160,240)
dibujarArbol("brown",160,240,160,200)

function dibujarArbol(color, xinicial, yinicial,xfinal,yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle= color;
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}```

Dejo mi aporte

No es mucho, pero lo intente jaja

Mas información de funciones en JavaScript
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones

var d = document.getElementById("televisor");
var lienzo = d.getContext("2d");

// Televisor
dibuTele("grey", 30, 50, 270, 50, 2);
dibuTele("grey", 30, 50, 30, 200, 2);
dibuTele("grey", 30, 200, 270, 200, 2);
dibuTele("grey", 270, 200, 270, 50, 2);
dibuTele("grey", 40, 60, 260, 60, 2);
dibuTele("grey", 40, 60, 40, 190, 2);
dibuTele("grey", 40, 190, 260, 190, 2);
dibuTele("grey", 260, 190, 260, 60, 2);

// Antena
dibuTele("grey", 150, 50, 60, 10, 3);
dibuTele("grey", 150, 50, 240, 10, 3);

// Bandera
dibuTele("red", 60, 95, 240, 95, 30);
dibuTele("white", 60, 125, 240, 125, 30);
dibuTele("blue", 60, 155, 240, 155, 30);


function dibuTele(color, xinicio, yinicio, xfinal, yfinal, ancho)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.lineWidth = ancho;
    lienzo.moveTo(xinicio, yinicio);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();    
}

Por favor el que vea este comentario que pruebe este codigo… me lo e currado bastante xDD y la risa esta asegurada xDDD 😃

var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

//tower
//linea
dibujarLinea(“black”, 168, 90, 278, 90);
//t
dibujarLinea(“red”, 180, 60, 180, 80);
dibujarLinea(“black”, 170, 60, 190, 60);
//o
dibujarLinea(“red”, 194, 60, 194, 80);
dibujarLinea(“black”, 194, 60, 206, 60);
dibujarLinea(“red”, 206, 60, 206, 80);
dibujarLinea(“black”, 194, 80, 206, 80);
//w
dibujarLinea(“red”, 214, 60, 220, 80);
dibujarLinea(“black”, 220, 80, 225, 65);
dibujarLinea(“red”, 225, 65, 230, 80);
dibujarLinea(“black”, 230, 80, 235, 60);
//e
dibujarLinea(“red”, 242, 60, 242, 80);
dibujarLinea(“black”, 242, 60, 252, 60);
dibujarLinea(“red”, 242, 70, 252, 70);
dibujarLinea(“black”, 242, 80, 252, 80);
//r
dibujarLinea(“red”, 260, 60, 260, 80);
dibujarLinea(“black”, 260, 60, 275, 60);

//$
dibujarLinea(“green”, 340, 60, 310, 60);
dibujarLinea(“green”, 310, 60, 310, 85);
dibujarLinea(“green”, 310, 85, 340, 85);
dibujarLinea(“green”, 340, 85, 340, 110);
dibujarLinea(“green”, 340, 110, 310, 110);
dibujarLinea(“green”, 320, 57, 320, 113);
dibujarLinea(“green”, 330, 57, 330, 113);
dibujarLinea(“green”, 310, 110, 310, 98);
dibujarLinea(“green”, 340, 60, 340, 72);
//trump
//linea
dibujarLinea(“black”, 188, 130, 300, 130);
//t
dibujarLinea(“red”, 200, 100, 200, 120);
dibujarLinea(“black”, 190, 100, 210, 100);
//r
dibujarLinea(“red”, 214, 100, 214, 120);
dibujarLinea(“black”, 214, 100, 230, 100);
//u
dibujarLinea(“red”, 238, 100, 238, 120);
dibujarLinea(“black”, 238, 120, 252, 120);
dibujarLinea(“red”, 252, 120, 252, 100);
//m
dibujarLinea(“red”, 262, 100, 262, 120);
dibujarLinea(“black”, 262, 100, 268, 110);
dibujarLinea(“red”, 268, 110, 275, 100);
dibujarLinea(“black”, 275, 100, 275, 120);
//p
dibujarLinea(“red”, 288, 100, 288, 122);
dibujarLinea(“black”, 288, 100, 298, 100);
dibujarLinea(“red”, 298, 100, 298, 112);
dibujarLinea(“black”, 288, 112, 298, 112);

// lineas vertical (paredes)
dibujarLinea(“black”, 10, 200, 10, 500);
dibujarLinea(“gold”, 150, 50, 150, 500);
dibujarLinea(“gold”, 350, 50, 350, 500);
dibujarLinea(“black”, 490, 270, 490, 500);

// lineas horizontales (techos)
dibujarLinea(“black”, 10, 200, 150, 200);
dibujarLinea(“gold”, 150, 50, 350, 50);
dibujarLinea(“black”, 490, 270, 350, 270);

// puerta 1
dibujarLinea(“black”, 50, 460, 50, 500);
dibujarLinea(“black”, 50, 460, 100, 460);
dibujarLinea(“black”, 100, 460, 100, 500);
dibujarLinea(“gold”, 75, 460, 75, 500);

//puerta 2
dibujarLinea(“black”, 200, 460, 200, 500);
dibujarLinea(“black”, 200, 460, 300, 460);
dibujarLinea(“black”, 300, 460, 300, 500);
dibujarLinea(“gold”, 250, 460, 250, 500);

//puerta 3
dibujarLinea(“black”, 390, 460, 390, 500);
dibujarLinea(“black”, 390, 460, 450, 460);
dibujarLinea(“black”, 450, 460, 450, 500);
dibujarLinea(“gold”, 420, 460, 420, 500);

Hice un pixel art de Mega Man :T
Tomo mucho más tiempo del que debería haber invertido pero ahí esta:

me siento pro dibujando lineas jsjssjaksjldjalsd

dibujarlinea(“yellow” , 30, 20, 30, 110)
dibujarlinea(“yellow” , 50, 20, 50, 110)
dibujarlinea(“yellow” , 70, 20, 70, 110)
dibujarlinea(“yellow” , 30, 110, 40, 120)
dibujarlinea(“yellow” , 40, 120, 50, 110)
dibujarlinea(“yellow” , 50, 110, 60, 120)
dibujarlinea(“yellow” , 60, 120, 70, 110)
dibujarlinea(“yellow” , 30, 20, 70, 20)
dibujarlinea(“red” , 30, 20, 40, 10)
dibujarlinea(“red” , 40, 10, 60, 10)
dibujarlinea(“red” , 60, 10, 70, 20)
dibujarlinea(“black” , 30, 110, 50, 150)
dibujarlinea(“black” , 50, 150, 70, 110)
dibujarlinea(“black” , 40, 130, 60, 130)
un mini lápiz xdxd

Hola por acá les dejo un bello dibujo:

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

dibujarLinea("red", 10, 10, 250, 10);
dibujarLinea("red", 250, 10, 250, 250);
dibujarLinea("red", 250, 250, 10, 250);
dibujarLinea("red", 10, 250, 10, 10);
dibujarLinea("blue", 10, 10, 250, 250);
dibujarLinea("blue", 10, 250, 250, 10);
dibujarLinea("blue", 10, 10, 250, 250);
dibujarLinea("blue", 130, 60, 130, 200);
dibujarLinea("blue", 60, 130, 200, 130);
dibujarLinea("red", 60, 130, 130, 60);
dibujarLinea("red", 60, 130, 130, 200);
dibujarLinea("red", 130, 60, 200, 130);
dibujarLinea("red", 200, 130, 130, 200);
dibujarLinea("green", 60, 130, 10, 10);
dibujarLinea("green", 10, 10, 130, 60);
dibujarLinea("green", 10, 250, 130, 200);
dibujarLinea("green", 10, 250, 60, 130);
dibujarLinea("green", 250, 250, 130, 200);
dibujarLinea("green", 250, 250, 200, 130);
dibujarLinea("green", 250, 10, 130, 60);
dibujarLinea("green", 250, 10, 200, 130);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

👉P de Platzi 😂

Que genial como de una forma tan pedagógica nos va introduciendo Freddy en el mundo de la programación. Realmente estoy emocionado por todo lo que queda por aprender.

Hola, usando los conocimientos de hasta ahora en este curso hice una calculadora que dibuja el símbolo de la operación que se ha realizado.
Les comparto el codigo y les INVITO A QUE LO PRUEBEN:
//CODIGO DE LA CALCULADORA
var valor1 = prompt(“Ingresa tu primer valor”);
var valor2 = prompt(“Ingresa tu segundo valor”);
valor1 = parseFloat(valor1);
valor2 = parseFloat(valor2);
var operacion = prompt("¿Que operación quieres realizar? \n 1 es Suma, 2 es Resta, 3 es Multiplicación y 4 es división");
var nombre;
operacion = parseInt(operacion);
if (operacion == 1)
{
resultado = valor1 + valor2
nombre = (“Suma”);
}
else if(operacion == 2)
{
resultado = valor1 - valor2;
nombre = (“resta”);
}
else if (operacion == 3)
{
resultado = valor1 * valor2;
nombre = (“multiplicación”);
}
else if (operacion == 4)
{
resultado = valor1 / valor2;
nombre = (“división”);
}
else
{
resultado = 100000000000;
nombre = (“Operación irreal”);
}
resultado = parseFloat(resultado);
document.write(“El resultado de tu " + nombre + " es igual a <strong>” + resultado + “</strong>”);

//CODIGO DEL CANVAS
var d = document.getElementById(“simbolo”); //Obteniendo el elemento del canvas en el html
var trazo = d.getContext(“2d”) //Vamos a dibujar en 2 dimensiones

function dibujarLinea (color, xinicial, yinicial, xfinal, yfinal) //funcion para dibujar varias lineas
{
trazo.beginPath(color, xinicial, yinicial, xfinal, yfinal);
trazo.strokeStyle = color;
trazo.moveTo(xinicial, yinicial);
trazo.lineTo(xfinal, yfinal);
trazo.stroke();
trazo.closePath();
}

if (operacion == 1)
{
dibujarLinea(“black”, 100, 100, 200, 100);
dibujarLinea(“black”, 100, 100, 100, 200);
dibujarLinea(“black”, 100, 200, 0, 200);
dibujarLinea(“black”, 0, 200, 0, 300);
dibujarLinea(“black”, 0, 300, 100, 300);
dibujarLinea(“black”, 100, 300, 100, 400);
dibujarLinea(“black”, 100, 400, 200, 400);
dibujarLinea(“black”, 200, 400, 200, 300);
dibujarLinea(“black”, 200, 300, 300, 300);
dibujarLinea(“black”, 300, 300, 300, 200);
dibujarLinea(“black”, 300, 200, 200, 200);
dibujarLinea(“black”, 200, 200, 200, 100);
}
else if (operacion == 2)
{
dibujarLinea(“black”, 100, 100, 400, 100);
dibujarLinea(“black”, 400, 100, 400, 200);
dibujarLinea(“black”, 400, 200, 100, 200);
dibujarLinea(“black”, 100, 200, 100, 100);

}
else if (operacion == 3)
{
dibujarLinea(“black”, 100, 300, 300, 100);
dibujarLinea(“black”, 300, 100, 400, 100);
dibujarLinea(“black”, 400, 100, 200, 300);
dibujarLinea(“black”, 200, 300, 100, 300);
dibujarLinea(“black”, 300, 300, 100, 100);
dibujarLinea(“black”, 100, 100, 200, 100);
dibujarLinea(“black”, 200, 100, 400, 300);
dibujarLinea(“black”, 400, 300, 300, 300);
}
else if (operacion == 4)
{
dibujarLinea(“black”, 100, 300, 300, 100);
dibujarLinea(“black”, 300, 100, 400, 100);
dibujarLinea(“black”, 400, 100, 200, 300);
dibujarLinea(“black”, 200, 300, 100, 300);
}

Quizá no se aprecia en mi dibujo, pero mi representación de una de las primeras cámaras estenopeicas. 😂

![](

Optimize mi codigo del video anterior

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
console.log(lienzo);

//FUNCIONES
//------------------Dibujar Lineas
function dLine(color, grosor, x1, y1, x2, y2)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color
  lienzo.lineWidth = grosor
  lienzo.moveTo(x1,y1);
  lienzo.lineTo(x2,y2);
  lienzo.stroke();
  lienzo.closePath()
}
//------------------Dibujar Cuadrado
function dRect(colore, colori, grosor, x1, y1, x2, y2)
{
  lienzo.beginPath();
  lienzo.strokeStyle = colore
  lienzo.fillStyle = colori
  lienzo.lineWidth = grosor
  lienzo.rect(x1, y1, x2, y2);
  lienzo.stroke();
  lienzo.fill();
  lienzo.closePath()
}
//------------------Escribir Texto
function dtexto(formato,color,x,y,texto)
{
  lienzo.font = formato
    lienzo.fillStyle = color
  lienzo.fillText(texto,x,y);
}

//DIBUJO
//Marco de canva
dRect("#943126","transparent","20",0,0,300,300)
//Bloque Rojo
dRect("transparent","#943126","1",20,20,150,150)
//Lineas
dLine("White","20",55,180,75,160)
dLine("White","20",75,170,75,100)
dLine("White","10",68,104,85,93)
dLine("White","20",160,110,160,170)
//Cuadros edificio
dRect("White","transparent","15",90,70,60,95)
dRect("White","transparent","5",112,75,18,90)
dRect("White","transparent","5",90,90,60,55)
dRect("White","transparent","5",90,110,60,20)
//Texto
dtexto("bold 30px Verdana", "Black", 150, 160, "FRANK")
dtexto("bold 30px Verdana", "Black", 75, 185, "GRANADOS")

dtexto("bold 10px Arial", "Black", 20, 265, "Sigueme en Instagram:")
dtexto("bold 10px Arial", "Black", 20, 280, "@frankogranados")

Nota:
JavaScript lee todo el código y guarda las funciones en memoria antes de ejecutar el código.
Es por eso que podemos declarar las funciones al final del programa.
Esto no sucede en otros leguajes de programación (como python) que leen el cogido de arriba abajo y no pueden llamar a una función antes de ser declarada

Acá dejo algunos datos importantes:

1. Para declarar funciones se escribe la palabra function seguido del nombre de la funcion (puede ser cualquiera, siguiendo las reglas de asignacion de nombres a variables), seguido de los parametros de la funcion entre parentesis

2. Los parametros son variables, por lo tanto se deben seguir las reglas de asignacion de nombres a variables.

3. En javascript primero se cargan las funciones en la memoria y luego el resto del codigo, por lo tanto, no importa donde se declare la funcion dentro del codigo.

Les dejo el código para que dibujen un corazón en un canvas de 500px por 500px, para los programadores enamorados jaja

//Inicia código:
var d = document.getElementById(“dibujito”); //Método que te regresa elemento
var lienzo = d.getContext(“2d”); //getContext es método del canvas y está en 2d
console.log(lienzo);

function dibujarLinea(color,xInicial,yInicial,xFinal,yFinal) {
lienzo.beginPath(); //inicia el camino
lienzo.strokeStyle = color; //color de dibujo
lienzo.moveTo(xInicial,yInicial); //punto de inicio
lienzo.lineTo(xFinal,yFinal); //punto de fin
lienzo.stroke(); //dibujamos la raya
lienzo.closePath(); //termina camino
}

dibujarLinea(“red”,250,500,400,300); //diagonal derecha
dibujarLinea(“red”,250,500,100,300); //diagonal izquierda

dibujarLinea(“red”,400,300,400,250); //línea recta vertical derecha
dibujarLinea(“red”,100,300,100,250); //línea recta vertical izquierda

dibujarLinea(“red”,400,250,350,200); //diagonal de arriba, derecha
dibujarLinea(“red”,100,250,150,200); //diagonal de arriba, izquierda

dibujarLinea(“red”,350,200,300,200); //línea recta horizontal derecha
dibujarLinea(“red”, 150,200,200,200); //línea recta horizontal izquierda

dibujarLinea(“red”,300,200,250,250); //final unión derecha
dibujarLinea(“red”,200,200,250,250); //final unión izquierda

Sugiero seguir los consejos de los demás comentarios y divertirte un poco con los estilos, apenas 7 lineas más de código pueden hacer un gran cambio

    <style type="text/css">
      body
      {
        background-color: black;
        color: yellow;
        font-family: Arial;
      }
    </style>

![](

Les comparto Mi código dibujando en CANVAS

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

dibujarLinea("yellow", 150, 150, 150, 50);
dibujarLinea("red", 150, 150, 50, 150);
dibujarLinea("blue", 50, 150, 50, 50);
dibujarLinea("green", 50, 50, 150 , 50);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal) {
  lienzo.beginPath(); //poner el lapiz sobre el papel (beginPath) Iniciar un camino
  lienzo.strokeStyle = color; // elegir el color de la linea (variable)
  lienzo.moveTo(xinicial, yinicial); // donde va arrancar la linea
  lienzo.lineTo(xfinal, yfinal); // trazar la linea
  lienzo.stroke(); //dibujar la linea con el estilo rojo
  lienzo.closePath(); //levanta el lapiz
}```

Me gustó mi resultado.~

Aquí mi práctica dibujando con Canvas dada la función vista en clase 💁🏾‍♀️

He realizado muchisimos cursos de programación de HTML, JS. Y me atrevería a afirmar y defender con todas las de la ley que ESTE es sin duda el mejor de todos. Profesor excelente, tono de voz perfecto, modo de enseñar ideal. Voy corriendo a decirle a mi prima de 11 años que lo haga y aprenda a programar y de bien seguro que no se pierde en ningún momento y una vez cumpla la mayoría de edad ya podrá trabajar de frontend developer para Google. Muchas gracias , Freddy, mira que este tipo de clases suelen ser un rollo, pero tú te encargas de hacerlo ameno y entretenido. En ningún momento se me ha hecho pesado, en NINGÚN momento!

Tercer intento:

Apuntes de la clase.

var d = document.getElementById("dibujito")
var lienzo = d.getContext("2d")


dibujarLineaEnCanva(1,1,1,150,"red")
dibujarLineaEnCanva(1,150,90,250,"red")
dibujarLineaEnCanva(90,250,200,250,"red")
dibujarLineaEnCanva(200,250,1,1,"red")

dibujarLineaEnCanva(150,150,300,10,"red")
dibujarLineaEnCanva(300,10, 299,120,"red")
dibujarLineaEnCanva(299,120,270,150,"red")
dibujarLineaEnCanva(270,150,150,150,"red")




function dibujarLineaEnCanva(x,y,xf,yf,color)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(x, y);
    lienzo.lineTo(xf, yf);
    lienzo.stroke();
    lienzo.closePath();
}

Hize el logo de valorant 😃

un cubo

var d = document.getElementById('dibujito'); //etiqueta canvas
var lienzo = d.getContext("2d");  //area o lienzo

dibujarLinea("red", 100, 100, 200, 100);
dibujarLinea("red", 200 ,100, 200 ,200);
dibujarLinea("red", 200, 200, 100, 200);
dibujarLinea("red", 100 ,200, 100 ,100);
dibujarLinea("red", 100 ,100, 150 ,50);
dibujarLinea("red", 150 ,50, 250 ,50);
dibujarLinea("red", 250 ,50, 200 ,100);
dibujarLinea("red", 250 ,50, 250 ,150);
dibujarLinea("red", 250 ,150, 200 ,200);
dibujarLinea("red", 100 ,200, 150 ,150);
dibujarLinea("red", 150 ,150, 250 ,150);
dibujarLinea("red", 250 ,50, 200 ,100);
dibujarLinea("red", 150 ,150, 150 ,50);

function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(x_inicial, y_inicial);
  lienzo.lineTo(x_final, y_final);
  lienzo.stroke();
  lienzo.closePath();
}

Un lindo te amo uwu

var d = document.getElementById(“dibujo”);
var lienzo = d.getContext(“2d”);

function dibujarLinea(color, xinicial1, yinicial1, xfinal1, yfinal1)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial1,yinicial1);
lienzo.lineTo (xfinal1,yfinal1);
lienzo.stroke();
lienzo.closePath();
}

dibujarLinea(“blue”,10,40, 40, 40);
dibujarLinea(“blue”,25,40, 25, 70);
dibujarLinea(“pink”, 60, 40, 60, 70);
dibujarLinea(“pink”, 60, 40, 80, 40);
dibujarLinea(“pink”, 60, 55, 75, 55);
dibujarLinea(“pink”, 60, 70, 80, 70);
dibujarLinea(“green”, 25, 100 , 10, 130);
dibujarLinea(“green”, 25, 100 , 40, 130);
dibujarLinea(“green”, 15, 120, 35, 120);
dibujarLinea(“orange”, 60, 100, 55, 130);
dibujarLinea(“orange”, 60, 100, 70, 120);
dibujarLinea(“orange”, 80, 100, 70, 120);
dibujarLinea(“orange”, 80, 100, 85, 130);
dibujarLinea(“brown”, 100, 100, 100, 130);
dibujarLinea(“brown”, 125, 100, 125, 130);
dibujarLinea(“brown”, 100, 100, 125, 100);
dibujarLinea(“brown”, 100, 130, 125, 130);
dibujarLinea(“red”, 50, 180, 80, 200);
dibujarLinea(“red”, 50, 180, 80, 160);
dibujarLinea(“red”, 80, 160, 90, 160);
dibujarLinea(“red”, 80, 180, 90, 180);
dibujarLinea(“red”, 80, 200, 90, 200);
dibujarLinea(“red”, 90, 160, 90, 200);

Clases de Platzi + Tiempo Libre = (v2)

console.log("Eureka");
var s2 = document.getElementById("s1");
var s3 = s2.getContext("2d");
function s4(x1, y1, x2, y2)
{
  s3.beginPath();
  s3.strokeStyle = "white";
  s3.moveTo(x1, y1);
  s3.lineTo(x2, y2);
  s3.stroke();
  s3.closePath();
}
s4(0, 0, 300, 0);
s4(300, 0, 300, 300);
s4(300, 300, 0, 300);
s4(0, 300, 0, 0);
s4(0, 0, 300, 300);
s4(300, 0, 0, 300);
s4(150, 0, 150, 300);
s4(0, 150, 300, 150);
s4(75, 0, 75, 300);
s4(225, 0, 225, 300);
s4(0, 75, 300, 75);
s4(0, 225, 300, 225);
s4(75, 0, 300, 225);
s4(150, 0, 300, 150);
s4(225, 0, 300, 75);
s4(0, 75, 225, 300);
s4(0, 150, 150, 300);
s4(0, 225, 75, 300);
s4(75, 0, 0, 75);
s4(150, 0, 0, 150);
s4(225, 0, 0, 225);
s4(300, 75, 75, 300);
s4(300, 150, 150, 300);
s4(300, 225, 225, 300);
s4(37.5, 0, 37.5, 300);
s4(112.5, 0, 112.5, 300);
s4(187.5, 0, 187.5, 300);
s4(262.5, 0, 262.5, 300);
s4(0,37.5, 300, 37.5);
s4(0, 112.5, 300, 112.5);
s4(0, 187.5, 300, 187.5);
s4(0, 262.5, 300, 262.5);

fue algo complicado pero haciendo algunos ejercicios ya se ve mas sencillo, aquí esta el mio, pueden intentar algo parecido.

Las funciones son muy importantes, puesto que simplifican el trabajo en cuanto a la re-utilización de código.

/* Obteniendo el elemento por su id */
let d = document.getElementById('dibujito');/* id del canvas */
let lienzo = d.getContext('2d');/* lienzo del canvas en 2d */
console.log(lienzo);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal){
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

/* invocando la funcion dibujar linea */
dibujarLinea('blue', 0, 299, 100,299);
dibujarLinea('blue', 100, 299, 100,249);
dibujarLinea('blue', 100, 249, 150,249);
dibujarLinea('blue', 150, 249, 150,189);
dibujarLinea('blue', 150, 189, 200,189);
dibujarLinea('blue', 200, 189, 200,139);
dibujarLinea('blue', 200, 139, 250,139);
dibujarLinea('blue', 250, 139, 250,89);
dibujarLinea('blue', 250, 89, 300,89);
/* dibujando la puerta */
dibujarLinea('green', 280, 89, 280,39);
dibujarLinea('green', 280, 39, 300,39);
dibujarLinea('green', 300, 39, 300,89);
dibujarLinea('black', 285, 69, 295,69);
dibujarLinea('black', 295, 69, 295,49);
dibujarLinea('black', 295, 49, 285,49);```

Ahí va mi resumen 😃

var d = document.getElementById("dibujito");//llamo al canvas desde el html
var lienzo = d.getContext("2d");// en la letra d esta "dibujito" get.context permite obtener el area para dibujar y es en 2 dimensiones

lienzo.beginPath(); // iniciar el trazo
lienzo.strokeStyle = "red"; //el color de la línea
lienzo.moveTo(50,10);  // pon el lapiz en x=100 y =100 ...
lienzo.lineTo(250,2);  //dibujar la línea hacia...
lienzo.stroke();  //stroke dibuja la línea
lienzo.closePath(); // para cerrar el trazo

lienzo.beginPath(); 
lienzo.strokeStyle = "blue"; 
lienzo.moveTo(180,10);  
lienzo.lineTo(290,200);  
lienzo.stroke();  
lienzo.closePath();

// todo lo anterior se puede crear en una función
function dibujarlinea (color, xinicial, yinicial, xfinal, yfinal){
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal,yfinal);
    lienzo.stroke();
    lienzo.closePath();
}
dibujarlinea("green", 10, 300, 220, 10);
dibujarlinea("pink", 300, 10, 10, 220);```

Por fin estoy de vacaciones, ya me puedo poner serio con el curso. :’)

Hola Freddy me quede trabado en esta clase, me sale un mensaje de error en la consola y por lo tanto no puedo hacer el trazo. Espero tu ayuda
Uncaught typeError: Cannot read property ‘getContext’ of null dibujo.js:2 at dibujo.js:2

Mira Un Barco Rosa!

<code>

function DibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
	lienzo.beginPath();
	lienzo.strokeStyle = color;
	lienzo.moveTo(xinicial, yinicial);
	lienzo.lineTo(xfinal, yfinal);
	lienzo.stroke();
	lienzo.closePath();
}
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
console.log (lienzo);
DibujarLinea("pink", 250, 200, 200, 250);
DibujarLinea("Pink", 200, 250, 50, 250);
DibujarLinea("pink", 50, 250, 10, 200);
DibujarLinea("Pink", 10, 200, 250, 200);
DibujarLinea("pink", 100, 200, 100, 10);
DibujarLinea("Pink", 100, 10, 50, 150);
DibujarLinea("pink", 50, 150, 200, 150);
DibujarLinea("Pink", 200, 150, 120, 10);
DibujarLinea("pink", 120, 10, 120, 200);

Y recuerden: Las funciones no son solo exclusivas de canvas para dibujar líneas, se puede usar en toooodo javascript.
ejemplo:

<html>
<head>
</head>
<body>
	<script>
		function escribir_en_pantalla(texto)
		{
			texto=prompt("Escribe algo de texto:")
			document.write("<hr> <br> <strong><center>" + texto + "</center></strong>");
		}
		escribir_en_pantalla();
		escribir_en_pantalla();
		escribir_en_pantalla();
	</script>
</body>
</html>

alert(“Nos leemos luego”);

Encontré una forma de engrosar las líneas

lienzo.lineWidth = grosor;

agregando grosor a la function y asignando el valor en los parámetros de la variable.

nombre soybarbaro en esto de la programación.

si todos los cursos relacionados con programación los imparte él o quienes lo imparten poseen esta capacidad de transmitir conocimiento con este nivel de vocación me inscribo de una cuando acabe el basic

bien difícil este tema, pero al fin logre entender su lógica
dibujarLinea(“red”, 0, 0, 300, 300);
dibujarLinea(“blue”, 300, 0, 0, 300);
dibujarLinea(“yellow”, 0, 0, 300, 0);
dibujarLinea(“black”, 0, 0, 0, 300);
dibujarLinea(“brown”, 150, 0, 150, 300);
dibujarLinea(“green”, 0, 150, 300, 150);
dibujarLinea(“purple”, 300, 300, 300, 0);
dibujarLinea(“light blue”, 300, 300, 0, 300);

con eso lo entendí yo! si les sirve de ayuda primero lo dibuje y plante en una hoja, luego es fácil deducirla con (x1,y1)
angulo superior izquierdo y (x2y2) angulo inferior derecha.

Super bueno! Comparto mi código en caso alguien lo necesite.

var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);

dibujarLinea(“pink”, 10, 300, 220, 10);
dibujarLinea(“yellow”, 300, 10, 10, 220);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

Sencillo pero me hizo muy feliz ❤️

Ama estoy programando :V

Hola! he estado practicando con las funciones para hacer un dibujo de una ventana y de una casa. Espero que les guste.
Ventana:

Casa:

PD: Cambie las variables y el identificador por “lienzo” y “dibujo”. Espero que les haya sido util.

lo tengo todo igual y no se que pasa, no se por que no se ejecuta el codigo. ¿podrian ayudarme? gracias.

var d = document.getElementById (“dibujito”);
var lienzo = d.getContext(“2d”);

dibujarLinea(“pink”, 10, 300, 220, 10);
dibujarLinea(“yellow”, 300, 10, 10, 220);

function dibujarLinea(color, xinicial, yinicial, xinicial, yinicial)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(x_inicial, y_inicial);
lienzo.lineTo(x_inicial, y_inicial);
lienzo.stroke();
lienzo.closePath();

}

me encontre un problema pero no hayo el error por que el codigo esta bien tomando en cuenta mayúsculas y minúsculas puntos y comas pero al terminar la función dibujar linea no me aparece la linea en el navegador![](

Hice uno sencillo, más que nada para jugar con los arcos y círculos, junto con las funciones

var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);

dibujar_arco(“blue”,30, 200,300,100,0,300);
dibujar_linea(“blue”,30, 200,300, 314, 300);
dibujar_circulo(“red”, 30, 410,330,70);
dibujar_circulo(“yellow”, 30, 590,330,70);
dibujar_circulo(“blue”, 30, 770,330,70);
dibujar_linea(“blue”,30, 840, 250,840,420);
dibujar_arco(“blue”,30, 770,420,70,0,150);
dibujar_linea(“green”,30,880,418,880,160);
dibujar_arco(“red”,30,990,330,70,30,340);
dibujar_linea(“red”,30,925,370,1058,290);

function dibujar_linea(color, grosor_linea, xinicial,yinicial,xfinal,yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth = grosor_linea;
lienzo.moveTo(xinicial,yinicial);
lienzo.lineTo(xfinal,yfinal);
lienzo.stroke();
lienzo.closePath();

}

function dibujar_circulo(contorno,grosor_linea,xinicial,yinicial,diametro)
{
lienzo.beginPath();
lienzo.strokeStyle = contorno;
lienzo.lineWidth=grosor_linea;
lienzo.arc(xinicial,yinicial,diametro,0,Math.PI*2,true);
lienzo.stroke();
lienzo.closePath();
//lienzo.fill();

}

function dibujar_arco(color, grosor_linea, xinicial, yinicial, radio, partida, final)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth=grosor_linea;
lienzo.arc(xinicial,yinicial,radio,Math.PI/180partida,Math.PI/180final,false);
lienzo.stroke();
lienzo.closePath();

}

Como se escribe comentarios en el codigo de java script???

1. Funciones en Javascript, son formas de escribir códigos.
2. Cuando escribir una función? Cuando el código es igual o similar y requiere que se escriba varias veces y se necesita que cambien el valor de las variables.
3. Para declarar una función se utiliza; función … nombre del dibujo… (Variables separadas por comas)
   {

}
4. Cómo traer el código del dibujo? Escribir en el bloque de código las variables detalladas con sus respectivas etiquetas.
5. Dónde escribir el código? Puede ser en cualquier parte del archivo .js pues no varía en nada el trabajo.
6. Para que se ejecute la función,se escribe dibujar … nombre del dibujo…(se escribe el valor de cada variable siguiendo el orden descrito en el bloque de código).

Interesante usar funciones, esto reduce bastante código

En Javascript se leen primero las funciones y posteriormente las lineas que esta afuera de estas

Aquí les dejo la manera en que yo dibujaría un cuadrado:

function dibujarCuadrado(papel, color, xInicial, yInicial, longth) {
    papel.beginPath();
    papel.strokeStyle = color;
    papel.moveTo(xInicial, yInicial);
    papel.lineTo(xInicial + longth, yInicial);
    papel.lineTo(xInicial + longth, yInicial + longth);
    papel.lineTo(xInicial, yInicial + longth);
    papel.lineTo(xInicial,yInicial);
    papel.stroke();
    papel.closePath();
}

Para que no modifiquen el contexto de su código en papel manden la variable que lo contenga.
Ejemplo:

d = document.getElementById("su id del canvas");
let lienzo = d.getContext("2d");

dibujarCuadrado(lienzo ,"red",1,1,50);

También quisiera saber como es que ustedes dibujarían un cuadrado utilizando una función.
Buen día 😃.

const content = document.getElementById("_draw");
var gesto = content.getContext("2d");

var colorIn, scale, orientation, colorSt;

function _Ask() {
  clearCanvas();
  colorIn = parseInt(
    prompt(
      "¿De que color quieres la curva?\n 1=Rojo\n 2=Verde\n 3=Azul\n 4=Negro"
    )
  );
  scale = prompt("Indique la escala que utilizara (ej. 20):");
  orientation = parseInt(
    prompt(
      "¿Que orientación quieres para tu curva?\n 1=Izquierda, superior\n 2=Izquierda, inferior\n 3=Derecha, superior\n 4=Derecha,inferior\n 5=Todas las anteriores."
    )
  );
  switch (colorIn) {
    case 1:
      colorSt = "Red";
      break;
    case 2:
      colorSt = "green";
      break;
    case 3:
      colorSt = "blue";
      break;
    case 4:
      colorSt = "black";
      break;
    default:
      colorSt = "black";
      break;
  }
  _drawAll();
}
_Ask();

function clearCanvas() {
  gesto.clearRect(0, 0, content.width, content.height);
}

function _draWithCanvas(
  _colorLine,
  _beginPointX,
  _beginPointY,
  _endPointX,
  _endPointY
) {
  gesto.beginPath();
  gesto.strokeStyle = _colorLine;
  gesto.moveTo(_beginPointX, _beginPointY);
  gesto.lineTo(_endPointX, _endPointY);
  gesto.stroke();
  gesto.closePath();
}



function _drawAll() {
  for (let index = 0; index <= 300 / scale; index++) {
    switch (orientation) {
      case 1:
        //izquierda superior
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);
        break;
      case 2:
        //izquierda inferior
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        break;
      case 3:
        //derecha superior
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);
        break;
      case 4:
        //derecha inferior
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);
        break;
      default:
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);
        break;
    }
  }
}

function _Mirror() {
  clearCanvas();
  for (let index = 0; index <= 300 / scale; index++) {
    switch (orientation) {
      case 1:
        //izquierda inferior
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        break;
      case 2:
        //izquierda superior
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);

        break;
      case 3:
        //derecha inferior
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);

        break;
      case 4:
        //derecha superior
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);

        break;
      default:
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);
        break;
    }
  }
  switch (orientation) {
    case 1:
      //izquierda inferior
      orientation = 2;
      break;
    case 2:
      //izquierda superior
      orientation = 1;
      break;
    case 3:
      //derecha inferior
      orientation = 4;
      break;
    case 4:
      //derecha superior
      orientation = 3;
      break;
    default:
      orientation = 5;
      break;
  }
}

![](

Resultado de mi practica usando Canvas =)

Una familia de triángulos son…
.