En este post sobre programación web HTML y JavaScript te mostraré cómo hacer que el usuario pueda dibujar en un canvas usando el mouse, algo así como un paint muy básico.

De esta forma vamos a permitir que el usuario pueda dibujar y pintar sobre el canvas usando el ratón.

Más adelante podrías adaptar este código para cualquier otra cosa, incluso para crear un paint completo. Aquí solo te mostraré cómo permitir que el usuario dibuje en la web con un color y grosor determinado.

Explicación del algoritmo

Vamos a escuchar los siguientes eventos con JavaScript: mousedown, mousemove, mouseup, mouseout. Y en cada evento vamos a establecer banderas, dibujar puntos o líneas según sea el caso.

En el caso del mousedown es cuando el usuario presiona el botón del ratón, y mouseup es cuando suelta el botón. En cambio mouseout es cuando el puntero sale del canvas, y mousemove es cuando el puntero se mueve sobre el canvas.

Escuchar mouseout y mouseup

See the gist on github.

Estos eventos van a establecer la bandera que indica que el usuario está presionado el botón en false.

Ya que si algo de esto pasa (soltar el mouse o salir del canvas) significa que el usuario ya no está manteniendo presionado el botón.

Evento mousedown

See the gist on github.

Aquí vamos a establecer la bandera que indica que el usuario está presionando el botón en true.

Además, vamos a dibujar un punto, ya que si el usuario da un clic y no mueve el puntero es porque solo quiso dibujar un punto.

mousemove: dibujar

El evento en donde realmente dibujamos es el evento mousemove, pero solo dibujamos sobre el canvas si es que la bandera que indica que el usuario está presionado el botón está en true.

See the gist on github.

En caso de que lo anteriormente mencionado se cumpla entonces dibujamos una línea conforme el usuario se va moviendo.

Obtener coordenadas reales

Por cierto, en las funciones anteriores pudiste notar que estoy invocando a obtenerXReal y obtenerYReal.

See the gist on github.

Eso es para obtener la coordenada x e y reales, ya que el canvas no siempre comenzará en 0,0, el mismo puede estar ubicado en otro lugar.

Poniendo todo junto

Ya te mostré los eventos para que el usuario dibuje en nuestro mini prototipo de paint, ahora te mostraré el código completo en donde puedes cambiar el color del “pincel” y su grosor.

Comenzando con el código JavaScript tenemos lo siguiente. Primero obtengo una referencia al canvas con querySelector y después declaro mis variables de las coordenadas anteriores y actuales, ya que recuerda que debemos saber las coordenadas anteriores para saber desde dónde dibujar.

See the gist on github.

Y en el HTML tenemos un simple Canvas sobre el cual el usuario va a dibujar:

See the gist on github.

Por cierto también está el CSS que permite colocar un borde al canvas. Esto es opcional, pero yo lo he dejado para que el usuario sepa los límites del lienzo de dibujo:

See the gist on github.

Finalmente si quieres explorar el código en un repositorio te lo dejo por aquí. También te dejo un enlace a la demostración en línea.

Si te gusta este lenguaje te invito a ver más posts sobre JavaScript en mi blog.