Dibujando con canvas: trazados
Tags: html, canvas, javascript, draw
Published: 2020-03-14 16:52:57

## Trazados en el canvas
 
[La aplicación que creamos previamente](https://dev.to/unjavascripter/dibujando-pixeles-en-el-navegador-con-canvas-y-cosas-extra-3b43) 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_](https://developer.mozilla.org/en-US/docs/Web/API/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`:
 
```ts
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:
 
```ts
handlePointerDown(event: PointerEvent){
 // ...
}
```
 
Ahora sí podemos crear el handler para el evento de _arrastrar_ justo después del evento para capturar el _pointer down_:
 
```ts
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:
 
```ts
handleDrag(event: PointerEvent) {
 if(event.buttons === 1) {
   this.drawPixel(event.x, event.y);
 }
}
```
> [Aquí encuentras más información](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#Determining_button_states) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action):
 
```html
<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/