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(鈥榥ombre_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(鈥渄ibujito鈥);
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 鈥淐reeper鈥 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 鈥榖eginPath鈥 of null
at dibujo.js:4

Revice todo el codigo y me enfoque en las mayusculas y minusculas de:
lienzo.beginPath();
lienzo.strokeStyle = 鈥渞ed鈥;
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=鈥渞ed鈥, 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 (鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

lienzo.beginPath();
lienzo.lineWidth= 10;
lienzo.strokeStyle = 鈥減ink鈥;
lienzo.moveTo(100, 100);
lienzo.lineTo(100, 200);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath();
lienzo.strokeStyle = 鈥減ink鈥;
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 鈥淴D鈥 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(鈥減iramide鈥); //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 = 鈥測ellow鈥;// 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 = 鈥済reen鈥;// 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 = 鈥渂lack鈥;// 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 = 鈥渙range鈥;// 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 = 鈥済ray鈥;// 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 = 鈥渂lue鈥;// 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 = 鈥渧iolet鈥;// 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 = 鈥渞ed鈥;// 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(鈥榙ibujito鈥));

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

con mucha paciencia jeje

Coloque el canvas en la calculadora de peso anterior

![](

var d = document.getElementById(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(500, 700);
lienzo.lineTo(300, 1000);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(500, 700);
lienzo.lineTo(700, 1000);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(500, 700);
lienzo.lineTo(500, 400);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(500, 400);
lienzo.lineTo(650, 600);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(500, 400);
lienzo.lineTo(350, 600);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(400, 400);
lienzo.lineTo(600, 400);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(400, 250);
lienzo.lineTo(600, 250);
lienzo.stroke();
lienzo.closePath()

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(400, 400);
lienzo.lineTo(400, 250);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(600, 400);
lienzo.lineTo(600, 250);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(450, 350);
lienzo.lineTo(550, 350);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(525, 300);
lienzo.lineTo(535, 300);
lienzo.stroke();
lienzo.closePath();

lienzo.beginPath(); //empezar trazo
lienzo.strokeStyle = 鈥渞ed鈥;
lienzo.moveTo(475, 300);
lienzo.lineTo(465, 300);
lienzo.stroke();
lienzo.closePath();

En resumen, se podr铆a decir que 鈥渃anvas鈥 funciona como un 鈥渓ienzo鈥 en blanco, donde la esquina superior izquierda es la coordenada (0, 0). En la cual el eje horizontal es 鈥渪鈥 y el eje vertical es 鈥測鈥.

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 鈥減osiciona鈥 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 鈥渁utocompletado鈥? 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 鈥榞etContext鈥.

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 鈥渋d鈥 llamada 鈥渄ibujito鈥.
Pues para solucionar este problema chequen que en su archivo HTML y en el JS digan los mismo.

<canvas width=鈥300鈥 height=鈥300鈥 id=鈥渄ibujito鈥></canvas>

var d = document.getElementById(鈥渄ibujito鈥);

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(鈥渋d鈥) 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(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);
console.log(lienzo);
lienzo.beginPath(); // Inicia un trazo
lienzo.strokeStyle = 鈥渞ed鈥; //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=鈥渄ibujo.js鈥</script>

siendo lo correcto

<script src=鈥渄ibujo.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 鈥榙鈥 esta sale en gris, pero la segunda vez en el minuto 12:25 鈥榙鈥 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 鈥渉tml: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(鈥渋d_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(鈥渘ombre_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(鈥榙ibujito1鈥);
    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 鈥榞etContext鈥) 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 鈥榞etContext鈥.
Espero les Sirva la info!!!
!!!