Empieza por acá

1

Mi primera línea de código

Fundamentos de Programación

2

¿Qué es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

Cómo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qué son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matemáticas y números aleatorios en JavaScript

19

Uso y carga de imágenes en Canvas

Cuarto proyecto: Pakimanes

20

División, módulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero automático

22

Diagrama de Flujo del Cajero Automático

23

Implementación del Cajero Automático

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programación de Hardware y Electrónica con Arduino

26

¿Cómo funciona un circuito electrónico?

27

¿Cómo programar un Arduino?

28

Programación de circuitos con C, Arduino y Sketch

29

Cómo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

¿Cuál lenguaje de programación aprender primero?

34

La Web con Visión Profesional

Contenido Bonus

35

Qué son tablas de verdad y compuertas lógicas

Recap Curso Gratis de Programación Básica

36

Recap Programación básica

37

Recap Programación básica ENG

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Dibujando en el DOM

12/37
Recursos

Para dibujar en HTML usamos la etiqueta canvas. Canvas () es un elemento de HTML que se utiliza para dibujar gráficos a través de comandos mediante un lenguaje de programación.

El uso de la etiqueta es el siguiente:

Para dibujar usamos JS para darle las instrucciones y los canvas funcionan con coordenadas

Solamente llegando al canvas no podemos dibujar, debemos crear un contexto, ahora sí, mira cómo dibujar con HTML y JavaScript

Recomendaciones para dibujar en el DOM

  • ID es el identificador con el que podemos encontrar etiquetas con JavaScript, los nombres siguen las mismas reglas que las variables

  • Puedes obtener un elemento con su id buscándolo con document.getElementById(‘nombre_id’);

Aporte creado por: Brayan Mamani

Aportes 2205

Preguntas 759

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

canvas (<canvas>) es un elemento de HTML que se utiliza para dibujar gráficos a través de comandos mediante un lenguaje de programación.

QUIEN LO MIRA EN EL 2021???

Barney habia explicado el canvas hace tiempo

la trifuerzaaa

Este es mi aporte

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

/**Superior derecho */
var j=150;
for(i=0; i <= 150; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j+10;

}

var j=0;
for(i=150; i <= 300; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(i,0);
lienzo.lineTo(300,j);
lienzo.stroke();
lienzo.closePath();
j=j+10;

}

/**inferior derecho */
var j=150;
for(i=300; i >= 150; i=i-10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j+10;
}

var j=290;
for(i=150; i <= 300; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(300,i);
lienzo.lineTo(j,300);
lienzo.stroke();
lienzo.closePath();
j=j-10;

}

/**Superior izquierdo */
var j=150;
for(i=0; i <= 150; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j-10;
}

var j=150;
for(i=10; i <= 150; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(i,0);
lienzo.lineTo(0,j);
lienzo.stroke();
lienzo.closePath();
j=j-10;

}

/**inferior izquierdo */
var j=150;
for(i=300; i >= 150; i=i-10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(150,i);
lienzo.lineTo(j,150);
lienzo.stroke();
lienzo.closePath();
j=j-10;
}

var j=10;
for(i=150; i <= 300; i=i+10){
lienzo.beginPath();
lienzo.strokeStyle = “#8B008B”;
lienzo.moveTo(0,i);
lienzo.lineTo(j,300);
lienzo.stroke();
lienzo.closePath();
j=j+10;

}____

Pues yo hice un “Creeper” jajaja

Hola!
Les contare cual fue mi error que me tarde en encontrarlo… Espero le ayude a alguien que no pueda…

Este era el error que me aparecia en la consola:
Uncaught TypeError: Cannot read property ‘beginPath’ of null
at dibujo.js:4

Revice todo el codigo y me enfoque en las mayusculas y minusculas de:
lienzo.beginPath();
lienzo.strokeStyle = “red”;
lienzo.moveTo(100,100);
lienzo.lineTo(200,200);
lienzo.stroke();
lienzo.closePath();

Y mi error si estaba en una mayuscula pero al poner “2D” ojo, va en minuscula.

Yo dibuje un Patricio Estrella. 😄

https://liiliith.github.io/canvas/

¿Alguien en 2021 amando este curso?

Apuntes de Clase

  • Así como las variables en Js tienen un nombre, una etiqueta en HTML tambien puede tenerlo, a través del atributo ID, es el atributo con el que JS va a ubicar una etiqueta, poseen las mismas reglas que las variables.
  • getElementById => Es una función en JS que nos permite llamar a un objeto por su ID.
  • getContext => Es una función del objeto que nos permite obtener el área del dibujo.
  • En javascript se puede realizar trazados tanto en 2D como en 3D esto se especifica dentro de la función getContext(“2d”)/getContext(“3d”).
  • beginPath => función del contexto de dibujos en 2d de JS que nos permite iniciar el trazo.
  • strokeStyle => Atributo o propiedad que nos permite elegir el color del trazado de la línea.
  • moveTo(x , y) => Metodo que posiciona el lápiz vitual en el punto inicial.
  • LineTo(x , y) => Método o Función que traza la línea hasta el punto final.
  • Stroke () => Colorea el trazo.
  • closePath => método o función que levanta el lápiz, si esta función no se declara, la siguiente línea se unirá con el final de esta.
<!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");

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(60, 70);
lienzo.lineTo(20, 110);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(20, 110);
lienzo.lineTo(60, 150);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(60, 150);
lienzo.lineTo(80, 130);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(80, 130);
lienzo.lineTo(70, 120);
lienzo.stroke();
lienzo.closePath();

Bueno porfin lo logré!!! son la 1:50 am!
Primero fue esto, pero me quivoque mientras entendia como ubicar los puntos en el plano

Y bueno este sie era el dibujo que quería!

Todo el codigo que use jajaja
pero valio la pena

Definitivamente el limite son las estrellas.

Intente hacer una figura que pareciera circulo pero mi cerebro no me dio para más 😦

.- la etiqueta de dibujo se llama canvas.
.- se dibuja a traves de js no de html.
.- funcionamiento del canvas.
.- uso de la etiqueta canvas en el codigo.
.- llamar un archivo js desde html.
.- el metodo getElementById(""), lo usamos para invocar al elemento dibujito por su id.
.- el metodo getContext("")}, le asignamos el elemento por su id a una variable que ladefinira por este metodo como 2d.
.- inspeccionamos este ultimo elemento con console.log.
.- Aquí comenzamos a dibujar:
.- lienzo.begin.path(), se coloca el lapiz en el papel
.- lienzo.strokeStyle=“red”, se define el color de la linea
.- lienzo.moveTo(), punto de inicio
.- lienzo.lineTo(), punto de finalización
.- lienzo.stroke(), trazar la linea
.- lienzo.closePath(), se levanta el lapiz
.- si no se cierra el camino, levanta el lapiz, la proxima linea que se programe, va a aempezar donde termino el path anterior.


jeje nombree tío jaja me tarde 4 dias haciendo eso jajaja asta que pude hoy

Hola, me figura un error de tipeo en la función getContext y no encuentro el problema. ¿Me podrian ayudar? Gracias

Dibuje una carita feliz ,aquí el código

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

lienzo.beginPath();
lienzo.lineWidth= 10;
lienzo.strokeStyle = “pink”;
lienzo.moveTo(100, 100);
lienzo.lineTo(100, 200);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = “pink”;
lienzo.moveTo(200,100);
lienzo.lineTo(200,200);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.moveTo(40, 150);
lienzo.bezierCurveTo(50, 300, 250, 300, 250, 150);
lienzo.stroke();
lienzo.closePath();

Me costo mas hacer el “XD” que las curvas lol
Aqui el codigo que use:

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

//Marco
lienzo.beginPath();
lienzo.rect(0, 0, 300, 300);
lienzo.lineWidth = "20"
lienzo.strokeStyle = "#943126"
lienzo.stroke();
lienzo.closePath();

//Texto
lienzo.font = "bold 30px Verdana";
lienzo.fillText("FRANK",173,170);
lienzo.fillText("GRANADOS",97,200);
lienzo.font = "bold 10px Arial";
lienzo.fillText("Sigueme en Instagram:",20,265);
lienzo.fillText("@frankogranados",20,280);

//LOGOTIPO
//Rectangulo Rojo
lienzo.beginPath();
lienzo.lineWidth = "1"
lienzo.fillStyle = "#943126";
lienzo.rect(20, 20, 150, 150);
lienzo.fill();
lienzo.closePath()

//Cuadros edificio
lienzo.beginPath();
lienzo.rect(90, 70, 60, 95);
lienzo.lineWidth = "15"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.rect(112, 75, 18, 90);
lienzo.lineWidth = "5"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.rect(90, 90, 60, 55);
lienzo.lineWidth = "5"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.rect(90, 110, 60, 20);
lienzo.lineWidth = "5"
lienzo.strokeStyle = "White";
lienzo.stroke();
lienzo.closePath();

//Lineas verticales
//De derecha a izquierda
lienzo.beginPath();
lienzo.lineWidth = "20"
lienzo.strokeStyle = "White"
lienzo.moveTo(75,100);
lienzo.lineTo(75,173);
lienzo.lineTo(55,173);
lienzo.stroke();
lienzo.closePath()

lienzo.beginPath();
lienzo.strokeStyle = "White"
lienzo.lineWidth = "20"
lienzo.moveTo(160,110);
lienzo.lineTo(160,175);
lienzo.stroke();
lienzo.closePath()```


Para los que usan la herramienta Visual Studio Code pongan :

html:

y presionen la tecla Tab.

van aparecer todos los elementos html,head,meta y body

Quien esta aqui en 2021???

Aqui les dejo una prueba de como se vé en 3D
https://kevin-parra-lopez.web.app/

Yo doy mi reacción así:

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

lienzo.beginPath();
lienzo.strokeStyle="red";
lienzo.moveTo(150, 200);
lienzo.lineTo(250, 100);
lienzo.lineTo(200, 50);
lienzo.lineTo(150,100);
lienzo.lineTo(100, 50);
lienzo.lineTo(50,100);
lienzo.lineTo(150, 200);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle="red";
lienzo.moveTo(150, 190);
lienzo.lineTo(240, 100);
lienzo.lineTo(200, 60);
lienzo.lineTo(150,110);
lienzo.lineTo(100, 60);
lienzo.lineTo(60,100);
lienzo.lineTo(150, 190);
lienzo.stroke();
lienzo.closePath();```

les dejo mis notas de esta clase

// notas de javascript

// en el ejemplo de var d vemos como cojemos el document.getlementbyid como en el css que en cascada podemos cojer elemntos del html
// el getelemntbyid sirve para cojer un id del html

// el getcontext es una funcion del objeto canvas que permite obtener el area donde vamos a dibujar recuerda que las mayusculas y minusculas
// son muy importantes en el javascript

// el beginPath es una funcion para indicar donde se inicia el trazo de la linea del dibujo

// strokeStyle es una variable una propiedad para elegir el color del trazo

// // el moveTo es una funcion del canvas para mover el lapiz a donde va arrancar la linea y se mide en x y en y del lienzo en el ejemplo
// se mueve de 100,100 del lienzo que es 300x300

// la funcion lineTo para trazar lineas o puntos lo que sea tambien se mide en x y y

// la funcion stroke dibuja la linea

// el closePath es para indicar donde se levanta el trazo una ves trazada la linea```

El curso esta genial y freddy esmuy claro, pero no se como me voy a acordar de tantas cosas a lo largo del tiempo

si les sirve dibujen el cuadrado en un papel y van jugando antes de colocar en el codigo es muy util me estaba reventando la cabeza a ver como lograba hacer una X pero con lapiz y papel pude entender mucho mejor!

Me costó un montón, hasta que le agarré la forma. Hubiese querido hacer algo más, pero esta bien para empezar 😄

var d = document.getElementById(“piramide”); //obtener el elemento del canvas
var lienzo = d.getContext(“2d”); // obtener el area donde voy a dibujar Contexto 2d / 3d
console.log(lienzo);

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “yellow”;// asignar el color del trazo
lienzo.moveTo(70, 50); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(20, 170); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath(); // levantar el trazo y terminar de dibujar, sin esta instruccion cuando inicie una nueva linea iniciara donde finalizo la anterior

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “green”;// asignar el color del trazo
lienzo.moveTo(20, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(90, 170); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “black”;// asignar el color del trazo
lienzo.moveTo(20, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 140); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([10, 5]);// hace que la linea sea discontinua compuesta por fragmentos de línea de 10px separados por espacios de 5px
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “orange”;// asignar el color del trazo
lienzo.moveTo(70, 140); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 50); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “gray”;// asignar el color del trazo
lienzo.moveTo(70, 140); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(140, 140); // trazar una linea hasta esas coordenadas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “blue”;// asignar el color del trazo
lienzo.moveTo(90, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 50); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([]); // deshabilita la discontinuidad de la linea para aislar la parte de código que establece el patrón de líneas discontinuas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “violet”;// asignar el color del trazo
lienzo.moveTo(90, 170); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(140, 140); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([]); // deshabilita la discontinuidad de la linea para aislar la parte de código que establece el patrón de líneas discontinuas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();

lienzo.beginPath(); // arrancar un trazo
lienzo.strokeStyle = “red”;// asignar el color del trazo
lienzo.moveTo(140, 140); //mover el lapiz donde va a iniciar la linea
lienzo.lineTo(70, 50); // trazar una linea hasta esas coordenadas
lienzo.setLineDash([]); // deshabilita la discontinuidad de la linea para aislar la parte de código que establece el patrón de líneas discontinuas
lienzo.stroke(); // trazar la linea con el estilo
lienzo.closePath();

![](

escribo el código literalmente igual al vídeo y la palabra lienzo no se pone roja cuando la uso de objeto, y document no se pone amarillo, no se que hago mal

Así quedo mi dibujo

var d = document.getElementById("dibujito");
// metodo del documento para traer un elemento por su Id
var lienzo = d.getContext("2d");
// metodo del canvas para generar el contexto

lienzo.beginPath(); //metodo para comenzar un trazo
lienzo.strokeStyle = "blue"; //atributo que indica el color de la linea
lienzo.moveTo(50, 10); // inicia el trazo
lienzo.lineTo(250, 2); //final del trazo
lienzo.stroke(); //dibuja la linea
lienzo.closePath(); //cierra el trazo

Hice esta estrella de con trazos de forma continua…

No soy fan de Atom como editor! si alguien mas intenta el ejercicio con Visual Studio Code se dara cuenta que .getElementById no contiene a .getContext. La solucion es:

var d = /** @type {HTMLCanvasElement} */ (document.querySelector(‘dibujito’));

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

con mucha paciencia jeje

Coloque el canvas en la calculadora de peso anterior

![](

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

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 700);
lienzo.lineTo(300, 1000);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 700);
lienzo.lineTo(700, 1000);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 700);
lienzo.lineTo(500, 400);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 400);
lienzo.lineTo(650, 600);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(500, 400);
lienzo.lineTo(350, 600);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(400, 400);
lienzo.lineTo(600, 400);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(400, 250);
lienzo.lineTo(600, 250);
lienzo.stroke();
lienzo.closePath()

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(400, 400);
lienzo.lineTo(400, 250);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(600, 400);
lienzo.lineTo(600, 250);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(450, 350);
lienzo.lineTo(550, 350);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(525, 300);
lienzo.lineTo(535, 300);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = “red”;
lienzo.moveTo(475, 300);
lienzo.lineTo(465, 300);
lienzo.stroke();
lienzo.closePath();

En resumen, se podría decir que “canvas” funciona como un “lienzo” en blanco, donde la esquina superior izquierda es la coordenada (0, 0). En la cual el eje horizontal es “x” y el eje vertical es “y”.

Y para destacar tenemos diversos atributos y métodos para utilizar entre los cuales encontramos:
-".beginPath()" : Iniciamos a dibujar un trazo.
-".strokeStyle" : Especificamos el color del trazo.
-".moveTo(coordX , coordY)" : Nos “posiciona” en la coordenada especificada.
-".lineTo(coordX , coordY)" : Realiza el trazo partiendo desde la coordenada especificada primeramente en el “.moveTo” y finalizando en la coordenada especificada en el “.lineTo”.
-".stroke()" : Cerramos el trazo.
-".closePath()" : Terminamos de dibujar.

Son los apuntes que tomé 😄

Me costo entender como funcionaba realmente jsjsj pero pude ah

como no entendí bien me tome la molestia de practicar por mi cuneta y lo hice con el logo de platzi

var b = document.getElementById("dibujito");
var lienzo = b.getContext("2d")
console.log(lienzo);
 lienzo.beginPath();
 lienzo.strokeStyle ="green";
 lienzo.moveTo(90,120);
 lienzo.lineTo(80,110);
 lienzo.lineTo(120,70);
 lienzo.lineTo(80,30);
 lienzo.lineTo(20,90);
 lienzo.lineTo(70,140);
 lienzo.lineTo(90,120);
 lienzo.lineTo(100,130);
 lienzo.lineTo(70,160);
 lienzo.lineTo(0,90);
 lienzo.lineTo(80,10);
 lienzo.lineTo(140,70);
 lienzo.lineTo(90,120);
 lienzo.stroke();
 lienzo.closePath();```

Buenas noches!

  • Hay alguna forma de que en Visual Studio Code las funciones aparezcan tipo “autocompletado”? Es decir, en vez de escribir todo el nombre de la función, ¿que me muestre las opciones?. Existirá alguna extensión en Visual para estas funciones?

  • Saben de algun sitio en Internet donde hablen de este tema mas en profundidad? Para conocer más funciones como estas.
    Gracias 😃

Como solucionar el error Uncaught TypeError: Cannot read property ‘getContext’.

Este error me costó dos días resolverlo y en verdad que es muy tonto si se puede llamar, pero bueno estamos aprendiendo y les comparto que para solucionarlo es algo muy sencillo, recordemos que asignamos una Identificación “id” llamada “dibujito”.
Pues para solucionar este problema chequen que en su archivo HTML y en el JS digan los mismo.

<canvas width=“300” height=“300” id=“dibujito”></canvas>

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

Lo de las coordenadas es algo confuso al principio XD

Para los amantes de The Legends Of Zelda Hice la trifuerza

Para iniciar el trazado se necesita lo siguiente:

-.beginPath(); – Para empezar el dibujo.

  • .strokeStyle="#color"; – Para escoger el color del trazo.
  • .moveTo(x,y); – Para escoger el punto en donde empezaras el trazo.
    -.lineTo(x.y); – Para escoger hasta donde irá el trazo.
  • .stroke(); – Para que se inicie el trazo.
  • .closePath(); – Para terminar de dibujar.

les cuento algo curioso, los programadores de JavaScript utilizaron la notación camelCase para los nombres en las funciones y los métodos, como en el caso de document.getElementById(“id”) donde la primera palabra que compone el nombre está en minúsculas y las demás están capitalizadas, es decir, solamente la primera letra en mayúsculas

Como consejo, pueden colocar comentarios dentro del codigo de javascript con //
var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);
console.log(lienzo);
lienzo.beginPath(); // Inicia un trazo
lienzo.strokeStyle = “red”; //Establece el colo rojo
lienzo.moveTo(100,100); //Comienzo de la linea
lienzo.lineTo(200,200); //Fin de la linea
lienzo.stroke(); // Realiza el trazo de la linea
lienzo.closePath(); //Cierra el trazo

APUNTES
La etiqueta de dibujo en HTML se llama <canvas>
reglas del canvas
Casi no ves nada ( Una caja en blanco)
Por HTML no se dibuja , se dibuja en JavaScript
<canvas> funciona con coordenadas (como el plano cartesiano)
Con X & Y
width= Ancho
Height= alto
atributo Id = ayuda a JavaScript a encontrar el elemento de HTML

Revisando minuciosamente logre ubicar el error

<script> src=“dibujo.js”</script>

siendo lo correcto

<script src=“dibujo.js”></script>

Una cosa tan sencilla me mato la cabeza!!

yo que pensé que nunca iba a volver a ver un plano cartesiano en mi vida jajajajaj

Hola, tu defines la variable lienzo con base en la variable d, que definiste antes, la primera vez que defines ‘d’ esta sale en gris, pero la segunda vez en el minuto 12:25 ‘d’ como ya fue definida aparece en otro color, como puedo configurar ATOM para que haga eso, a mi todo esa parte me aparece en gris, y esa funcion que tu tienes me parece muy util.Gracias

Uso Visual Studio Core en lugar de Atom y es excelente porque al poner una etiqueta te pone la etiqueta de cierre en automático.
Allí, está el atajo de poner en la primera línea “html:5” sin comillas o el signo “!” y presionar tabulador para que se pongan las etiquetas de html, head, body, etc.

Recordé winlogo hace muchos años la usábamos en el colegio para hacer dibujos con base en coordenadas y la pinche tortuga hacia los trazos
var d = document.getElementById("dibujito"); // Método que trae un elemento a travez de su Id
var lienzo = d.getContext("2d"); //Metodo del canvas para el contexto

lienzo.beginPath(); //Funcion para comenzar
lienzo.strokeStyle ="blue";//Atribujo - variable color de linea
lienzo.moveTo(100,100); //Inicio del trazo
lienzo.lineTo(200,200); //Final del trazo
lienzo.stroke(); // Dibujo trazo
lienzo.closePath(); //Funcion para terminar```

Excelente explicación mejor no puede ser , Gracias

estoy llegando medio tarde al curso, veo k hay comentarios de mas de 3 años, pero lo bueno es que siegue siendo util, por lo menos para m i.

por que desde que pongo la t de </script> se me pone todo en color gris dando una señal de que e puesto algo mal y si quito la t vuelve a la normalidad como puedo soluciona eso que estoy haciendo mal

Mi canvas ^^


.

Un tip que les paso es que use para hacer la línea mas gruesa

lineWidth=5 

Nuevos Conceptos de HTML:

  • <canvas>: Etiqueta que se utiliza para dibujar graficas 2D o 3D usando código JavaScript.

  • id: Atributo que asigna un valor único a una etiqueta.

  • width: Atributo que establece el ancho de pixeles en una etiqueta.

  • height: Atributo que establece la altura de pixeles en una etiqueta.

Nuevos Conceptos de JavaScript:

  • getElementById: Metodo que devuelve un elemento con un valor determinado.

  • getContext: Método que se utiliza para establecer si el modelo de dibujo es 2d o 3d.

  • beginPath: Método para establecer que vamos a iniciar un trazo.

  • strokeStyle: Atributo que determina el color del trazo.

  • moveTo: Método que establece el punto iniciar del trazo.

  • lineTo: Método que establece el punto final del trazo.

  • stroke: Método que se utiliza para dibujar el trazo.

  • closePath: Metodo que indica el final del dibujo.

NOTA: A diferencia de moveTo y lineTo, los cuales solamente denotan las coordenadas dentro del canvas, stroke se usa para dibujar el trazo. (moveTo y lineTo NO dibujan el trazo).

Aquí algunas pruebas que seguí haciendo con el canvas.

Para dibujar en HTML es necesario usar una etiqueta.
Se requiere el uso JS para dar instrucciones a través de una función llamada canvas, canvas funciona con coordenadas
Canvas es una etiqueta de dibujo, que como todo, tiene reglas:
1. Visualmente se tiene que ver nada, literal solo se debe ver un espacio en blanco.
2. No se puede dibujar por HTML, todo se dibuja a través de JS.
Canvas por defecto siempre tiene un alto y un ancho.
Para dibujar se debe crear todo un contexto con HTML y JS.
En HTML tenemos un atributo con una característica muy especial, este es:
Id Su función es colocarle nombre a una etiqueta especial, JS se identificara con el y posteriormente encontrará la etiqueta. Id tiene exactamente las mismas reglas de una variable.
Para obtener un elemento a partir del id se usa document.getElementById, después tenemos getContext el cual es una función del objeto canvas, este nos permite obtener el área donde vamos a dibujar.

Y esto apenas es el comienzo, canvas tiene muchas funciones, cada una de ellas enfocada a cada detalle que tendrá nuestro dibujo.
Algunas de ellas son:
beginPath Es una función de JS que nos permite hacer trazos en 2d.
strokeStyle (Es una variable) Sirve para asignar un color a nuestra línea.
moveTo Función de canvas que nos permite mover el lápiz en donde va arrancar la línea.
lineTo Su función es trazar un línea
Stroke Dibuja la línea.
closePath Se usa para cerrar nuestra línea.

var at = document.getElementById("Amigo trazo"); <!-- Al ser funcion tiene un parametro -->
var lienzo = at.getContext("2d");

lienzo.beginPath();
lienzo.strokeStyle = "black";
lienzo.moveTo(50, 10);
lienzo.lineTo(250, 2);
lienzo.stroke();
lienzo.closePath();```

Algo simple, por ahora 😄

una pequeña animación con canvas javascript al dibujar un policigono y cambiar de color las lineas,falta optimizar el código.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dibujando con CANVAS</title>

    <style>
        canvas {
            display: block;
            margin: auto;
            align-self: center;
            background-color: black;
            border: solid white;
            border-radius: 1rem;
        }
        
        body {
            background-color: rgb(84, 104, 114);
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>DIBUJO EN CANVAS</h1>
    <canvas width="300" height="300" id="dibujito"></canvas>
    <p>DIBUJO ANIMADO</p>
    <script src="dibujo.js"></script>
</body>

</html>

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

dibujar_poligono("red", 100, 100, 100, 200);
dibujar_poligono("blue", 150, 150, 50, 150);
dibujar_poligono("green", 100, 100, 150, 150);
dibujar_poligono("yellow", 100, 100, 50, 150);
dibujar_poligono("green", 50, 150, 100, 200);
dibujar_poligono("yellow", 150, 150, 100, 200);
dibujar_poligono("purple", 100, 150, 76, 125);
dibujar_poligono("purple", 100, 150, 127, 125);
dibujar_poligono("purple", 100, 150, 76, 178);
dibujar_poligono("purple", 100, 150, 126, 176);

setTimeout("animar()", 50);
setTimeout("animar()", 650);
setTimeout("animar()", 1300);



function dibujar_poligono(color, xini, yini, xfin, yfin) {


    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(xini, yini);
    lienzo.lineTo(xfin, yfin);
    lienzo.stroke();
    lienzo.closePath();
}


function animar() {


    // ... la magia sucede aqui

    for (i = 0; i < 6; i++) {

        if (i == 1) {
            setTimeout("d1()", 100);



        }

        if (i == 2) {
            setTimeout("d2()", 200);



        }


        if (i == 3) {
            setTimeout("d3()", 300);



        }

        if (i == 4) {
            setTimeout("d4()", 400);



        }

        if (i == 5) {
            setTimeout("d5()", 500);


        }

    }
}

function limpiar() {

    lienzo.clearRect(0, 0, 300, 300);

}

function d1() {
    limpiar();
    dibujar_poligono("green", 100, 100, 100, 200);
    dibujar_poligono("red", 150, 150, 50, 150);
    dibujar_poligono("blue", 100, 100, 150, 150);
    dibujar_poligono("purple", 100, 100, 50, 150);
    dibujar_poligono("green", 50, 150, 100, 200);
    dibujar_poligono("purple", 150, 150, 100, 200);
    dibujar_poligono("yellow", 100, 150, 76, 125);
    dibujar_poligono("yellow", 100, 150, 127, 125);
    dibujar_poligono("yellow", 100, 150, 76, 178);
    dibujar_poligono("yellow", 100, 150, 126, 176);
}

function d2() {
    limpiar();
    dibujar_poligono("yellow", 100, 100, 100, 200);
    dibujar_poligono("red", 150, 150, 50, 150);
    dibujar_poligono("purple", 100, 100, 150, 150);
    dibujar_poligono("blue", 100, 100, 50, 150);
    dibujar_poligono("purple", 50, 150, 100, 200);
    dibujar_poligono("yellow", 150, 150, 100, 200);
    dibujar_poligono("green", 100, 150, 76, 125);
    dibujar_poligono("green", 100, 150, 127, 125);
    dibujar_poligono("green", 100, 150, 76, 178);
    dibujar_poligono("green", 100, 150, 126, 176);
}

function d3() {
    limpiar();
    dibujar_poligono("yellow", 100, 100, 100, 200);
    dibujar_poligono("purple", 150, 150, 50, 150);
    dibujar_poligono("purple", 100, 100, 150, 150);
    dibujar_poligono("green", 100, 100, 50, 150);
    dibujar_poligono("red", 50, 150, 100, 200);
    dibujar_poligono("yellow", 150, 150, 100, 200);
    dibujar_poligono("blue", 100, 150, 76, 125);
    dibujar_poligono("blue", 100, 150, 127, 125);
    dibujar_poligono("blue", 100, 150, 76, 178);
    dibujar_poligono("blue", 100, 150, 126, 176);
}

function d4() {
    limpiar();
    dibujar_poligono("purple", 100, 100, 100, 200);
    dibujar_poligono("blue", 150, 150, 50, 150);
    dibujar_poligono("green", 100, 100, 150, 150);
    dibujar_poligono("green", 100, 100, 50, 150);
    dibujar_poligono("blue", 50, 150, 100, 200);
    dibujar_poligono("yellow", 150, 150, 100, 200);
    dibujar_poligono("red", 100, 150, 76, 125);
    dibujar_poligono("red", 100, 150, 127, 125);
    dibujar_poligono("red", 100, 150, 76, 178);
    dibujar_poligono("red", 100, 150, 126, 176);
}

function d5() {
    limpiar();
    dibujar_poligono("red", 100, 100, 100, 200);
    dibujar_poligono("blue", 150, 150, 50, 150);
    dibujar_poligono("yellow", 100, 100, 150, 150);
    dibujar_poligono("green", 100, 100, 50, 150);
    dibujar_poligono("red", 50, 150, 100, 200);
    dibujar_poligono("yellow", 150, 150, 100, 200);
    dibujar_poligono("purple", 100, 150, 76, 125);
    dibujar_poligono("purple", 100, 150, 127, 125);
    dibujar_poligono("purple", 100, 150, 76, 178);
    dibujar_poligono("purple", 100, 150, 126, 176);
}

A los que no les queda claro por qué se coloca una mayúscula al principio de cada palabra después de otra. Es una regla en la programación (Camel case) que nos comenta que la cuando vamos a escribir 2 o más palabras juntas, la palabra siguiente a la otra debe llevar mayúscula para poder diferenciar mejor entre palabras y poder leer mejor. 😃

Aca dejo algunos datos importantes:

  1. El canvas funciona similar a un plano cartesiano, sin embargo, solo utiliza las coordenadas positivas

  2. Se puede personalizar las dimensiones del canvas con el uso de los atributos width (ancho) y height (largo) escribiendolas dentro de la etiqueta del canvas y asignadole el valor deseado.

  3. Para traer un elemento del codigo HTML se hace mediante su id el cual se le asigna al momento de crear el elemento, en este caso, el canvas. Se realiza de la siguiente forma: document.getElementById(“id_del_canvas”)

Hice un rectangulo.
lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(100,200);
lienzo.lineTo(200,200);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(200,200);
lienzo.lineTo(200,150);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(200,150);
lienzo.lineTo(100,150);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green"
lienzo.moveTo(100,150);
lienzo.lineTo(100,200);
lienzo.stroke();
lienzo.closePath();

Apunte de clase
Para dibujar en HTML es necesario usar una etiqueta.
Se requiere el uso JS para dar instrucciones a través de una función llamada canvas, canvas funciona con coordenadas
Canvas es una etiqueta de dibujo, que como todo, tiene reglas:
1. Visualmente se tiene que ver nada, literal solo se debe ver un espacio en blanco.
2. No se puede dibujar por HTML, todo se dibuja a través de JS.
Canvas por defecto siempre tiene un alto y un ancho.
Para dibujar se debe crear todo un contexto con HTML y JS.
En HTML tenemos un atributo con una característica muy especial, este es:
Id Su función colocarle nombre a una etiqueta especial, JS se identificara con el y posteriormente encontrará la etiqueta. Id tiene exactamente las mismas reglas de una variable.
Para obtener un elemento a partir del id se usa document.getElementById, después tenemos getContext el cual es una función del objeto canvas, este nos permite obtener el área donde vamos a dibujar.

Y esto apenas es el comienzo, canvas tiene muchas funciones, cada una de ellas enfocada a cada detalle que tendrá nuestro dibujo.
Algunas de ellas son:
beginPath Es una función de JS que nos permite hacer trazos en 2d.
strokeStyle (Es una variable) Sirve para asignar un color a nuestra línea.
moveTo Función de canvas que nos permite mover el lápiz en donde va arrancar la línea.
lineTo Su función es trazar un línea
Stroke Dibuja la línea.
closePath Se usa para cerrar nuestra línea.

NOTA:
§ ID es el identificador con el encontraremos etiquetas con JS, los nombres siguen las mismas reglas que las variables.
§ Document.getElementById(“nombre_id”) se usa para buscar y obtener un elemento con id.

le agregue una forma de cambiar el tamaño del canvas desde el javaScript sin tener q cambiarlo desde el html, seguro q va a ser util

var squareSpaceX = "400";
var squareSpaceY = "400";
var square = document.getElementById("canvasSuper");
var lineColor = "blue";

square.height = squareSpaceX;
square.width = squareSpaceY;
canvasSpace = square.getContext("2d");

//some consoles
console.log(canvasSpace);
console.log(squareSpaceX);
console.log(squareSpaceY);
console.log(square);

//funtions
canvasSpace.beginPath();
canvasSpace.strokeStyle = lineColor;
canvasSpace.moveTo(100, 100);
canvasSpace.lineTo(200, 200);
canvasSpace.stroke();
canvasSpace.closePath();

//funtion squareChange coming soon```

Algo de tiempo libre + Clases de Platzi =

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

Me encantó esta lección, me divertí mucho haciendo esto:

PUDE HACER EL LOGO DE PLATZI
NO ME SALIO PERFECTO PERO SALIO 😉

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

lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(95, 80);
lienzo.lineTo(95, 140);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(95, 80);
lienzo.lineTo(115, 90);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(115, 90);
lienzo.lineTo(95, 110);
lienzo.stroke();
lienzo.closePath();


lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(100, 140);
lienzo.lineTo(102, 140);
lienzo.stroke();
lienzo.closePath();



lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(115, 140);
lienzo.lineTo(150, 100);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(150, 100);
lienzo.lineTo(100, 50);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(100, 50);
lienzo.lineTo(40, 110);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(40, 110);
lienzo.lineTo(95, 175);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "#40ff00";
lienzo.moveTo(95, 175);
lienzo.lineTo(120, 150);
lienzo.stroke();
lienzo.closePath();

Para empezar a dibujar en JS se necesita crear dos variables:

  1. Para traer la etiqueta desde el documento HTML
    var d = document.getElementById(‘dibujito1’);
    dibujito = al ID que le asignamos a la etiqueta canvas // Esto es una forma para traer o invocar una etiqueta de HTML a un archivo de JS

  2. Se indica la dimensión en la cual se trabajará (2d o 3d)
    var lienzo = d.getContext(“2d”);

Se puede verificar con console.log(lienzo);

no he podido subir uma imagen, no se como la verdad, pero pude hacer el logo de platzi, sin las lineas curvas, y agrege dos propiedades que no estan en el ejercicio, ancho de la linea, y que sea redonda y no cuadrada, el area del dibujo en el html es 400 x 450 px

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

lienzo.lineWidth = "10";
lienzo.lineCap = "round"

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 10);
lienzo.lineTo(370, 170);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(370, 170);
lienzo.lineTo(210, 328);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 328);
lienzo.lineTo(90, 210);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(90, 210);
lienzo.lineTo(210, 90);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 90);
lienzo.lineTo(290, 170);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(290, 170);
lienzo.lineTo(210, 250);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 250);
lienzo.lineTo(290, 330);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(290, 330);
lienzo.lineTo(210, 410);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(210, 410);
lienzo.lineTo(10, 210);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = "green";
lienzo.moveTo(10, 210);
lienzo.lineTo(210, 10);
lienzo.stroke();
lienzo.closePath();

me puse algo concentrado con las clases de fredy y esto salio.

La funcion getElementById al ser nativa de JS se le denomina método, ya que está dentro del objeto DOCUMENT.
Importante: Los parámetros de las funciones van entre PARENTESIS y no con IGUAL, duré como 20 minutos con un error y ese era el problema. Para que no les pase

Para dibujar en HTML es ncesario usar la etiqueta
<canvas></canvas>
pero todo el codigo se hace en JS, lo unico que necesitamos es hacer referencia desde el archivo JS a la etiqueta

<canvas></canvas> Esto lo hacemos con un id como atributo de la etiqueta
<canvas with="300" height="300" id="dibujito ></canvas>
en el HTML y con el método

getElementById("dibujito")```

El canvas puede tener las dimensiones que queramos, por defecto aparece con una dimensión predeterminada.
El id nos sirve para que con JS podamos encontrar y manipular elementos html

Hice esta broma xD

Que loco, no me aparecía la línea, el error fue escribir (strokes) en vez de (stroke). Me sentí humillado, pero tremendamente bien cuando descubrí el mínimo error 😄

Hasta las 12:34 ya que no me corría. me sentí genial cuando lo logre correr. Si se puede 😃

Quien lo mira en 2022? 😄

hola, asi es como yo lo hice, nueno soy principiante y no me salio muy bien, pero yo estoy contento con lo que logre.
Aqui les va el mio:
Captura.PNG

Hola aqui dejo mi ejercicio de la clase. Sin embargo para los que esten teniendo problemas con el error (Uncaught TypeError: Cannot read property ‘getContext’) en Visual Studio Code aqui les dejo la solucion.
https://www.howtosolutions.net/2016/09/visual-studio-fixing-intellisense-canvas-context-not-working-issue/
Se deben seguir el segundo camino y luego de esto visual studio ya reconocera la propiedad ‘getContext’.
Espero les Sirva la info!!!
!!!