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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: