En este último ejercicio vimos algo llamado canvas el cual es un elemento de HTML que es usado para dibujar gráficos sobre la página web (definimos un lienzo o tablero y a partir de este podemos empezar a dibujar) comúnmente lo hacemos con JavaScript. Puede ser usado para dibujar gráficos, combinar fotos o crear simples y no tan simples animaciones. Para utilizar canvas tenemos que tener un entendimiento de HTML, JavaScript, algo de matemáticas y física (si leíste bien matemáticas y física, para algo nos tenían que servir aparte de atormentarnos la existencia en la universidad y en el colegio), es importante estas últimas porque vamos a estar trabajando por lo general en un plano 2D o 3D, vamos a simular el movimiento de elementos, calcular distancias entre puntos dinámicamente, etc. En fin todo depende de lo que quieras hacer y de lo que dejes volar tu imaginación, para que te sorprendas un poco con lo que puedes hacer con canvas, puedes mirar estos increíbles Codepens: Gravity points, Particle branches, Trail, Canvas bokeh generation, Abysm, Canvas fireworks, Particles y Color smoke.
Canvas es un tema bastante extenso de explicar (Henry se comprometió a dar una capacitación de este tema, mientras tanto puedes leer este tutorial de Mozilla), por lo tanto nos enfocaremos en las propiedades que usamos en el ejercicio que hicimos.
Primero en nuestro HTML definimos la etiqueta canvas con un id que llamamos draw, en nuestro CSS de manera global le asignamos unos estilos para que nuestro canvas ocupe todo el espacio de la pantalla disponible y en donde vamos a hacer la magia es en nuestro JavaScript, en la primera línea obtenemos con JavaScript el elemento con id draw luego obtenemos el contexto en el cual vamos a trabajar nuestro canvas (esto es supremamente importante, de omitir este paso el navegador no sabrá sobre cuál lienzo debe dibujar). Una vez hecho esto le asignamos el width y el height del tamaño de la actual pantalla, ahora vamos a ver con más detalle cada una de las propiedades de canvas que usamos.
Con StrokeStyle definimos el color de la línea, este color se lo podemos pasar con cualquiera de las notaciones de color que existen actualmente en CSS (nombre, hexadecimal, HSL, rgb y rgba). Algo importante es que para definir una línea lo hacemos como definimos una línea en el plano cartesiano; es decir, necesitamos un punto inicial y un punto final, esto lo hacemos con el método lineTo, de la siguiente manera: context.strokeStyle = "red"; context.lineTo(20, 20); context.lineTo(20, 100); con esto creamos una línea de color rojo que comienza en el punto (20, 20) y finaliza en el punto (20, 100), si queremos mover esta línea hacemos uso de otro método que se llama moveTo, por ejemplo: context.moveTo(20, 10) con esto le decimos que quiero que mueva la línea 20 puntos en X y 10 en Y, ahora queremos que los extremos de la línea tenga bordes redondeados, esto lo hacemos con la propiedad lineCap, esta propiedad recibe los parámetros butt (borde plano al final de cada línea), round (bordes redondeados al final) y square (bordes cuadrados al final), por ejemplo: context.lineCap = ‘round’ le estamos diciendo que la línea tendrá bordes redondeados al final, ahora queremos que nuestra línea sea más gruesa, esto lo hacemos con la propiedad lineWidth, por ejemplo context.lineWidth = 70 definimos una línea de grosor de 70 píxeles. Ahora vamos a crear dos líneas de la siguiente manera: context.lineJoin = "round"; context.moveTo(20, 20); context.lineTo(100, 50); context.lineTo(20, 100); lo importante a mencionar acá es la propiedad lineJoin mediante esta propiedad estamos indicando que cuando se cruzan las líneas como queremos el estilo de la intersección, recibe los valores de bevel (esquina biselada), round (esquina redondeada) y miter (esquina afilada).
Listo, esas serán las propiedades que necesitamos para nuestro ejercicio, retomando con nuestro JavaScript, lo siguiente que hacemos es suscribirnos los eventos mousedown, mousemove, mouseup,mouseout y dblclick, en los cuales hacemos consecutivamente cambiamos la variable isDrawing para indicarle que vamos a dibujar y asignamos la posición en X y en Y con las mismas coordenadas en la que estamos moviendo el mouse, en el siguiente llamamos a la función draw en esta validamos que se pueda dibujar en el canvas, luego asignamos el color HSL en el valor de HUE lo cambiamos y luego cuando llega a 360 lo volvemos a cambiar a 0, movemos la línea en las coordenadas de X y Y que asignamos anteriormente, pintamos la línea y aumentamos el grosor de la línea hasta 70 cuando llegamos a 70 lo reiniciamos a 1, en el siguiente evento mouseup y mouseout cambiamos el valor de la variable isDrawing in false para indicar que no vamos a seguir dibujando y en el último evento limpiamos el tablero del canvas haciendo uso de la función context.clearRect().