Dibujando en el DOM

user_deleted_1572741

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

Lener Castillo

hace 9 meses

QUIEN LO MIRA EN EL 2021???

ivanelias20

Andrés Perdomo

Barney habia explicado el canvas hace tiempo

00111zs

christian-carranza

la trifuerzaaa

Marco Antonio González Hernández

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;

}____

AxlRubio

Pues yo hice un “Creeper” jajaja

Belinda Estephania Nava

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.

Ambar Z. Alvarez Vélez

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

Yo dibuje un Patricio Estrella. 😄

Laura Castellanos

hace 10 meses

¿Alguien en 2021 amando este curso?

Gustavo Daniel Franco Gonzalez

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.

Stephania Ramirez

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

Vinicio Velez

Elcristiancamilo

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!

salvat

Todo el codigo que use jajaja
pero valio la pena

Brahan Leandro Soledad García

Definitivamente el limite son las estrellas.

Diego A'r

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

Dylan Maximiliano

jdiegochg10

Jesus Aular

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

Crystian Suarez

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

Mateo Aquino

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

Captura de pantalla 2019-10-03 a la(s) 09.59.27.png

Luis Alberto Luisjuan Guerrero

Diego Fernando Rojas Quintero

Laura Cucunuba

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

Jose Gerardo Ramos Rosas

Alejandro Sánchez Moriel

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

Francisco Javier Granados Silva

Captura de pantalla 2020-05-31 00.07.09.png

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

Lucas Ramirez

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

Yeison Betancourt

hace 7 meses

Quien esta aqui en 2021???

Kevin Parra Lopez

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

Diego Martinez

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

Cesar esteban Guerrero fernandez

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

Lautaro Bermudez

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

David Fernando Martinez

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!

Sabino Fernández

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

andresglond

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

Cathia Luque Salluco

![](

Santiago Bascuñan

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

ANNYI KATERINE CASTRO ESTUPINAN

jonathan elizalde martinez

Así quedo mi dibujo

Etienne Santiago Samboni

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

Michelle Estefanía Arias López

Hice esta estrella de con trazos de forma continua…

chris_gony

hace 4 meses

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

Andres Naranjo

hace 7 meses

con mucha paciencia jeje

Alejandro Matias Schwartz

Coloque el canvas en la calculadora de peso anterior

![](

davidvargasleos

Captura de pantalla 2019-10-25 a la(s) 13.55.52.png

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

Jorvict

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é 😄

Pedro sebo

Me costo entender como funcionaba realmente jsjsj pero pude ah

Stiven Jiménez

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

Luciana Fernandez

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 😃

antonio cordova carmona

hace 5 meses

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.

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

Andres Ramirez

maurohs

Lo de las coordenadas es algo confuso al principio XD

Gian Piero Torrejon Pajar

hace 9 meses

josue-funes

Para los amantes de The Legends Of Zelda Hice la trifuerza

0mar_

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.

Alfonso Neil Jimenez Casallas

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

Jose Adan Felipe Morales

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

Mariana Ruge

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

Arley Bermúdez

Revisando minuciosamente logre ubicar el error

siendo lo correcto

Una cosa tan sencilla me mato la cabeza!!

Andrey Jhojanci Londoño Salazar

William Jose Zuluaga Giraldo

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

Jeifer M. Martinez

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

Areli Lisset Michel Bermejo

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.

edward-martinez

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

Arthur Wilson Chavez Mora

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

Jefry_Mateus

Excelente explicación mejor no puede ser , Gracias

Gabriel Villarreal

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.

Yunior

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

nonamoes

Platzi Team

hace 2 meses

Mi canvas ^^

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

lineWidth=5

MIGUEL CARDOZO

hace 3 meses

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

Israel Castro Urieta

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

Diego Garcia Hernandez

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

marivero

Algo simple, por ahora 😄

JOSE LUIS LIZALDA TORRES

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

Dayana Bedoya Londoño

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

Axel Colmenares

Aca dejo algunos datos importantes:

El canvas funciona similar a un plano cartesiano, sin embargo, solo utiliza las coordenadas positivas
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.
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”)

Estefano Vasquez

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

Guillermo David Zevallos Escalante

Diego Garcia Hernandez

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.

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.

Henry J. Perez

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

eterno_estudiante

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

Daniel Augusto Escobedo Martínez

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

Javier Alejandro Carrizo

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

ValeriaMP

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

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

Jhoell Ventura

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

irving plata

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

Carlos Lizarazo

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

Luis Alfredo Valencia Rincón

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

Daniel Eduardo Sanchez Yañez

Hice esta broma xD

Gissell Chaves M

Miguel Angel Diaz

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 😄

Jorge Enrique

Jorge Rivera