En esta clase se utilizará la etiqueta canvas para dibujar

<canvas> = Etiqueta de dibujo

Esta etiqueta tiene una serie de particularidades:

• No se ve a simple vista, es una caja en blanco
• Desde HTML no se puede dibujar
  • Se dibuja a través de JavaScript
• No tiene Bordes, se ve todo blanco
• Se maneja como un plano de coordenadas cartesianas con el eje Y invertido

**<canvas></canvas> =** también tiene atributos por defecto, como por ejemplo, un ancho y un alto predeterminado. Sin embargo, esto se puede cambiar así

<canvas widht = "300" height = "300" id = "dibujito"></canvas>

<aside> 🔥 IMPORTANTE: el atributo “ id ” se le puede agregar a cualquier elemento de HTML para hacer referencia a esta etiqueta

Este atributo sigue las mismas reglas de las variables

</aside>

Hay que tener muy en cuenta

Que solo con el canvas no se puede empezar a dibujar, este es el area reservada para dibujar, sin embargo, para poder agregar algo, se debe crear un lienzo, es decir, un area de dibujo

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

En este caso,

se toma el canvas llamado "dibujito" del objeto document, que es donde se encuentra todo el contenido de la página HTML

Por otro lado,

el lienzo hace uso del canvas en un formato de dos dimensiones (2d) usando la función .getContext(); la cual es una función que permite obtener el área sobre el cuál se va a dibujar

Dibujando

Se hace uso de multiples funciones para poder dibujar, por ejemplo

lienzo.beginPath(); = Es la forma de iniciar un camino, internamente, es la forma en la que JavaScript le llama a arrancar un trazo

lienzo.strokeStyle = color; = Esta es una variable de la linea que voy a utilizar