Dibujando con canvas: trazados

Trazados en el canvas

La aplicación que creamos previamente es capaz de dibujar un pixel del tamaño configurado al hacer clic sobre cualquier parte del canvas. Pero todavía no se siente tan natural. Vamos a hacer que el usuario pueda hacer trazados.

Objetivo

Cuando el usuario hace clic (izquierdo) sobre el canvas se debe dibujar un pixel
Si el usuario mueve el cursor hacia un pixel vacío adyacente
Y si el usuario mantiene el botón de clic presionado
Se debe dibujar un pixel

Ya tenemos las reglas de lo que debe pasar.

Mouse events vs. Pointer events

Los días de sólo pensar en un mouse como único dispositivo de interacción quedaron atrás. Como bien sabemos, ahora también tenemos que pensar en dispositivos táctiles y su comportamiento. Afortunadamente tenemos pointer events que capturan interacciones tanto del clásico mouse como eventos touch, así que podemos pasar tranquilamente de eventos mousedown o mouseover a pointerdown o pointerover.

El código

En la primera iteración de la aplicación agregamos un Event Listener al canvas para capturar el evento de clic. Vamos a reemplazar ese evento con el pointer event pointerdown:

this.canvasElem.addEventListener('pointerdown', (event: PointerEvent) => {
// ...

Es importante notar que ya no estamos recibiendo un evento de click en el callback, sino un evento de pointer; por esta razón cambiamos el tipo del evento a PointerEvent.

También es necesario cambiar la función que se ejecuta en el callback, se llama handleClick y pues... ya no son sólo clicks:

handlePointerDown(event: PointerEvent){
 // ...
}

Ahora sí podemos crear el handler para el evento de arrastrar justo después del evento para capturar el pointer down:

this.canvasElem.addEventListener('pointermove', (event: PointerEvent) => {
 this.handleDrag(event);
});

La función handleDrag validará si el equivalente al botón derecho se encuentra presionado a la hora de mover el pointer sobre el canvas, si es así, la función que dibuja un pixel se llama:

handleDrag(event: PointerEvent) {
 if(event.buttons === 1) {
   this.drawPixel(event.x, event.y);
 }
}

Aquí encuentras más información acerca del uso de event.buttons para determinar el botón presionado.

Finalmente, agregamos un par de estilos a index.html para que se vea un poco mejor (margin) poder interactuar tranquilamente con el canvas desde dispositivos touch:

<style>
 body {
   margin: 0;
 }
 canvas {
   touch-action: none;
 }
</style>

!Y listo¡

Ya podemos dibujar tranquilamente, pero como todavía no somos perfectos, seguramente tendremos que deshacer algun paso de nuestra expresión artística en algún momento. Trabajemos en eso en el siguiente post.

¿Y el repo?

Aquí está https://github.com/UnJavaScripter/pixel-paint

¿Y el demo?

Aquí https://unjavascripter.github.io/pixel-paint/