Excelente Freddy, haces muy didáctica la explicación y por ende la comprensión es mayor. Para quienes están iniciando en el mundo del desarrollo, les comento que las funciones suelen salvarnos la vida en muchos mucho casos, reducen el tiempo de implementación y dan dinamismo al desarrollo, soy ptyhonista y les aconsejo leer un principio que se denomina “DRY” (Do not repeat yourself) o lo que sería en español (No te repitas).

Excelente trabajo.

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

No se si a alguien mas le pasa, pero es primer curso donde en un par de horas he escrito tanto codigo ... se entiende perfecto sin tantas vueltas en las explicaciones

En el cual los usuario eligen las cordenadas

var d = document.getElementById('dibujo');
var t = d.getContext('2d');

dibujar( prompt("color"), parseInt(prompt("xinicial")) ,parseInt(prompt("yinicial"))
	    ,parseInt(prompt("xfinal")),parseInt(prompt("yfinal")));

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

con menos codigo y mas detalle xd

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);

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

hay dos tipos de personas:

function dibujarLinea()
{
}

y

function dibujarLinea(){
}

Prefiero la segunda, cuál les gusta a ustedes?

<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();
}

```

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

hice un cubo

dibujarLinea("black", 100, 100, 200, 100);// A
dibujarLinea("black", 100, 100, 100, 200);// B
dibujarLinea("black", 200, 100, 200, 200);// C
dibujarLinea("black", 100, 200, 200, 200);// D

dibujarLinea("black", 100, 100, 150, 50);// E
dibujarLinea("black", 200, 100, 250, 50);// F
dibujarLinea("black", 150, 50, 250, 50);// G
dibujarLinea("black", 250, 50, 250, 150);// H
dibujarLinea("black", 200, 200, 250, 150);// I
dibujarLinea("black", 150, 50, 150, 150);// J
dibujarLinea("black", 150, 150, 100, 200);// K
dibujarLinea("black", 150, 150, 250, 150);// l```

I’m love code

Genial!

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.

/* Solamente llegando a la etiqueta canvas no podemos dibujar, debemos obtener la etiqueta canvas
pero tambien el lienzo (el area de dibujo), porque asi funciona JS para dibujar */
var d = document.getElementById('dibujito');
/* El metodo getElementById del objeto document, es la forma en la que obtenemos en js un objeto del arbol html
en este caso el canvas, el parametro es el id en este caso 'dibujito' */
var lienzo = d.getContext('2d');
/* d es la variable que guarda mi objeto canvas, y getContext es un metodo del objeto canvas que te permite obtener el area de dibujo,
en JS podemos dibujar en 2D o en 3D, y le debemos especificar a JS el escenario que queramos indicandoselo
en los parametros del metodo getContext */
/* lienzo es el contexto 2d que hemos traido del canvas que obtuvimos a traves del id */

/*
  lienzo.beginPath();
   - Este metodo arranca un trazo, a este funcion no se le pasa ningun parametro simplemente es invocada, para invocar una funcion
     se colocan (), hay funciones que no tienen parametros, en cambio hay otras que tienen multiples parametros como moveTo o lineTo
  lienzo.strokeStyle = 'blue';
   - Este atributo te permite cambiar el color del ,
  lienzo.moveTo(100, 100);
   - Este metodo te permite mover la linea a donde quieres que arranque
   - El primer parametro es el de la "X" y el segundo de la "Y"
  lienzo.lineTo(200, 200);
   - Este metodo te permite dibujar la linea hasta donde quieras que finalice
  lienzo.stroke();
   - Este metodo es simplemente el hecho de trazar la linea con el estilo que elegimos anteriormente
  lienzo.closePath();
   - Este metodo finaliza un trazo
*/

/*
  lienzo.beginPath();
  lienzo.strokeStyle = 'red';
  lienzo.moveTo(130, 10);
  lienzo.lineTo(20, 190);
  lienzo.stroke();
  lienzo.closePath();
*/

/* Las funciones son una herramienta de JS o de cualquier lenguaje de programacion que nos permite escribir codigo
que vamos a re-usar multiples veces, la forma facil para saber cuando debes escribir una funcion es cuando estes escribiendo
el mismo codigo o codigo muy similar muchas veces y lo unico que cambia son variables, por ejemplo los codigos de arriba */

/*
Puedes escribir una función en JavaScript así:

  function nombreFuncion(parametros)
    {
      //Código que ejecuta la 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();
}
/* Observa que el codigo tiene unos pequeños espacios, esto se llama indentacion, y es una forma visual facil de entender que
algo pertenece a un codigo */
/* Hay que cambiar los valores fijos por los valores variables por ejemplo: "blue" a color, pero cuidado sin colocar entre comillas,
si no significaria que quieres el color "color" pero eso no existe, lo que hacemos realmente es invocar la variable color */
/* Lo que haces realmente en los parametros de la funcion es declarar esas variables, pero solo las declaras cada vez que
esa funcion es invocada, cuando la funcion deja de ser invocada estas mueren, pero funcionan dentro de las llaves */
/* ¿Dónde se coloca una función? Realmente puedes colocarla donde quieras, ya que JS funciona de la siguiente manera, primero lee todo
el codigo, busca donde hay funciones, las coloca en la memoria y luego empieza a colocar todo el codigo que esta por fuera de una
funcion */
/* Recuerda que solo declaramos la funcion, pero no la hemos invocado */
dibujarLinea("pink", 10, 300, 220, 10);
// Invocamos la funcion
dibujarLinea("black", 2, 50, 3, 70);
dibujarLinea("green", 67, 89, 20, 200);
dibujarLinea("blue", 150, 300, 2, 20);
dibujarLinea("red", 30, 300, 200, 20);
// Ya tenemos una funcion que nos dibuja lineas de forma ilimitada
/* Esta funcion nos ahorra mucho tiempo, ademas si cometieramos un error solo lo tendriamos que arreglar en dicha funcion
y no ir linea a linea intentando arreglarlo */

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);

Llevo años usando funciones pero hoy y con este simple ejemplo las vine a entender realmente. Freddy eres el mejor maestro!

// Codigo que ingresa los datos dinamicamente por prompt

var d = document.getElementById("dibujito");

var lienzo = d.getContext("2d");

var miDibujo = function(){

	lienzo.beginPath(); // Funcion para declarar el inicio de la linea

	lienzo.strokeStyle = "red"; // Propiedad que permite seleccionar el color

	lienzo.moveTo(100, 150); // Funcion para iniciar la linea

	lienzo.lineTo(200, 100); // Funcion para finalizar la linea

	lienzo.stroke(); // Funcion para dibujar la lunea como tal. 

function dibujarLinea(color, xinicial, xfinal, yinicial, yfinal){

	lienzo.beginPath(); // Funcion para declarar el inicio de la linea

	lienzo.strokeStyle = color; // Propiedad que permite seleccionar el color

	lienzo.moveTo(xinicial, yinicial); // Funcion para iniciar la linea

	lienzo.lineTo(xfinal, yfinal); // Funcion para finalizar la linea

	lienzo.stroke(); // Funcion para dibujar la lunea como tal. 

	lienzo.closePath(); // Funcion para delcarar el fin de la linea

}

var color = prompt("ingrese el color");

var xinicial = prompt("ingrese el xinicial");

var xfinal = prompt("ingrese el xfinal");

var yinicial = prompt("ingrese el yinicial");

var yfinal = prompt("ingrese el yfinal");

document.write = dibujarLinea(color, xinicial, xfinal, yinicial, yfinal)

Muy buen ejercicio!

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();
}

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.

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

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

ya le agarre el tiro jaja !!

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);

Les comparto mi dibujo, esto esta genial !!

<!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);

.- 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.

tremendo ejercicio!

![](

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

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()

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

Mi nombre en Canvas 😃

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

No es mucho, pero lo intente jaja

Dejo mi aporte

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();
}```

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

Cuando estás escribiendo el código y solo cambian variables, quiere decir que debes usar funciones.

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
}```

![](

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>

Asi quedo mi proyecto espero practiquen

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

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.

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

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

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);
}

Una pequeña modificación poniendo en practica todas las clases que llevamos 😄 espero les ayude en algo!

yo le agregue el atributo lineWidth

function trazarLinea(x_inicio, y_inicio, x_final, y_final, color, grosor)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth = grosor;
lienzo.moveTo(x_inicio,y_inicio);
lienzo.lineTo(x_final,y_final);
lienzo.stroke();
lienzo.closePath();
}

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

trazarLinea(20, 20, 280, 280, “blue”, 3);
trazarLinea(20, 280, 280, 20, “red”, 22);

Acabo de sentir lo que es solucionar un problema cuando tu codigo no anda y es fascinante!. Para ello recorde el tema de ir a la consola y ahi me mostrò donde estaba el error, era un simple tema de haber tipeado mal el nombre de una variable. Que alivio !

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”);

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);

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

👉P de Platzi 😂

me siento pro dibujando lineas jsjssjaksjldjalsd

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

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);```

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);```

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

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.

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

![](

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);

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);

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();
}

![](

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();
}

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")

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);

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.

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

Mejoré mi rectángulo! Es mucho más sencillo de lo que creí. GRACIAS PLATZI <3 

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");

dibujarLinea("green", 200, 200, 300, 300);

dibujarLinea("pink", 400, 200, 200, 200);

dibujarLinea("red", 400, 200, 300, 300);

dibujarLinea("black", 500, 300, 400, 200);

dibujarLinea("blue", 500, 300, 300, 300);

dibujarLinea("orange", 200, 200, 100, 300);

dibujarLinea("gold", 100, 300, 300, 300);

dibujarLinea("purple", 300, 100, 200, 200);

dibujarLinea("silver", 300, 100, 400, 200);

dibujarLinea("brown", 400, 200, 500, 100);

dibujarLinea("green", 500, 100, 300, 100);

dibujarLinea("pink", 500, 100, 500, 300);

dibujarLinea("red", 100, 300, 100, 100);

dibujarLinea("black", 100, 100, 300, 100);

dibujarLinea("blue", 100, 100, 200, 200);

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

Hola, 

En las dos clases que hemos utilizado JavaScript, parace que no me funciona porque no puedo ver nada cuando cargo la pantalla. Creo que tiene algo que ver con el documento., lo guardo en el archivo canvas junto al html y lo guardo como "dibujo.js" y aún así no me funciona. ¿Podeís ayudarme?

Gracias! 

Mi primer dibujo con canvas, excelente curso.

Interesante usar funciones, esto reduce bastante código

Gracias, Freddy gran aporte.

Hola, les comparto mis apuntes:

Las funciones son herramientas que nos permiten escribir código igual o parecido que debemos de repetir varias veces.

Se pueden colocar en cualquier parte del código, no importa el orden.

Ya que Js para leer el código primero busca si existen funciones para guardarla en la memoria y después ejecutar el siguiente código que no es función.

Para declarar una función se debe hacer con la palabra reservada functión Paréntesis y llaves que es en donde se darán los parámetros y se escribirá el bloque de código a ejecutar respectivamente.

function XX () {
}

Una vez declarado, se debe realizar la invocación del código tantas veces lo necesitamos agregando en los paréntesis los parámetros que debemos/necesitamos cambiar,

😃

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

mi primer código hecho sin la ayuda de fredy

<!doctype>
<html>
<head>
<meta charset=“utf-8”>
<title>este es un archivo</title>
</head>
<body>
<h1>es un pequeño documento</h1>
<script>
var base = 3.5;
var altura = 3.5;
var area_cuadrado = base * altura;
document.write("el area del cuadrado es " + area_cuadrado);
</script>
</body>
</html>

HICE UNA TRIFUERZA :v
Dibujo.js
function dibujarLinea (x_inicial, y_inicial, x_final, y_final)
{
lienzo.beginPath();
lienzo.strokeStyle = “gold”;
lienzo.lineWidth = 10
lienzo.moveTo(x_inicial, y_inicial);
lienzo.lineTo(x_final, y_final);
lienzo.stroke();
lienzo.closePath();
}
var d = document.getElementById(‘dibujito’);
var lienzo = d.getContext(“2d”);
console.log(lienzo);
dibujarLinea(150, 60, 0, 300);
dibujarLinea(0, 300, 300, 300);
dibujarLinea(300, 300, 150, 60);
dibujarLinea(150, 300, 85, 170);
dibujarLinea(150, 300, 215, 170);
dibujarLinea(85, 170, 215, 170);

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).

Jejeje… hice una casita… jejeje… 😦 necesito amigos @durbonca

¡Por fin vuelvo a usar coordenadas en el plano cartesiano después del colegio! La verdad no pensé que me iba a parecer tan entretenido aprender código, gracias!! hice por mi misma la letra K´, para ir ensayando!

![](

Habia leido muchas cosas sobre las funciones pero nunca las llegue a entender hasta ahora. diablos!!! 5 años de univerisdad por el piso T_T.