Dibujar en canvas de JavaScript usando mouse - Prototipo de paint

Dibujar en canvas con mouse usando JavaScript

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

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

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.

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.

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

Dibujar en canvas de JavaScript usando mouse - Prototipo de paint
Dibujar en canvas de JavaScript usando mouse – Prototipo de paint

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.

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

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:

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

2 comentarios en “Dibujar en canvas con mouse usando JavaScript”

  1. Me ha sido muy útil este post, pero para versión móvil hace el scroll cuando intento firmar y solo pone un puntito.
    He puesto los eventos touchstart, touchend y touchmove y así escribe, pero sigue detectando el scroll.

Dejar un comentario