Como habilitar el Dibujado con el Mouse o Dedos sobre un Canvas HTML 5 en Desktop y Móviles

4 minuto(s)

Demo Github

El Lenguaje de marcado HTML 5 unido con JavaScript nos permiten crear aplicaciones muy importantes como una aplicación que permita dibujar con el mouse sobre un elemento canvas de HTML 5, en este Post te mostraré como hacer que sea posible esta característica, vamos con ello. 

Antes de continuar con este Post, si quieres aprender o conoces sobre algún amigo o amiga que quiere aprender HTML 5 desde 0, puedes visitar el curso con más de 45 videos totalmente gratis, el Lema de Nube Colectiva es “el conocimiento en la Nube es Colectivo”:

Continuemos con el Post: Como habilitar el Dibujado con el Mouse o Dedos sobre un Canvas HTML 5 en Desktop y Móviles. 

Que es un Canvas ?

El termino Canvas traducido al español significa Lienzo, esencialmente es un contenedor para varios elementos gráficos como cuadrados, rectángulos, arcos, imágenes, etc.

También nos brinda un control flexible sobre un determinada animación de sus elementos gráficos dentro del Canvas. Para habilitar la funcionalidad de dibujado con el mouse, se debe de utilizar el Lenguaje de Programación JavaScript.

Habilitando el dibujado con el mouse sobre un canvas HTML 5

Vamos a usar utilizar una variable flag llamada dibujar para habilitar y deshabilitar el dibujo haciendo uso de los eventos del mouse. Los eventos que escucharemos serán los eventos mousedown, mouseup y mousemove en JavaScript.

El elemento canvas por defecto tiene algunas propiedades como padding, etc. (se pueden cambiar pos estilos). Por ende, las propiedades offsetTop y offsetLeft se utilizan para recuperar la posición del lienzo, en relación con su offsetParent (elemento ancestro más cercano del lienzo en el DOM). Al restar los valores de event.clientX y event.clientY, podemos reposicionar el punto de inicio del dibujo en la punta del cursor.

También creamos una función llamada dibujo() en donde utilizaremos los siguientes métodos para darle funcionalidad:

beginPath()

Inicia una nueva ruta cada vez que se hace clic con el botón izquierdo del mouse para dibujar.

lineWidth()

Establece el ancho de la línea que se dibuja en el Canvas.

strokeStyle()

Lo usamos para establecer el color de la línea que se dibuja en el Canvas.

moveTo()

Es la posición de inicio de la ruta que se mueve a diferentes coordenadas al dibujar en el Canvas.

lineTo()

Crea una línea desde una posición hasta las coordenadas determinadas al dibujar en el Canvas.

stroke()

Este agrega un trazo a la línea dibujada en el Canvas. Sin esto, la línea no será visible en el Canvas.

Bien a continuación el código JavaScript que permite que un usuario dibuje líneas sobre un Canvas (En el código he colocado comentarios para explicar que hace cada línea del código):


La función dibujo() solo se ejecutará si el valor es true. Es importantes actualizar las coordenadas almacenadas en el objeto coordenadas después de beginPath(), por lo tanto se llama a obtenerPosicion(event).

Ahora en la vista HTML sencillamente colocamos un elemento canvas con el nombre de id micanvas.


Y le doy los siguientes estilos CSS:


Eso es todo, al inicio del Post, puedes ver una Demo en donde se encuentra la aplicación en funcionamiento y un Repositorio GitHub con el código.

Conclusión

Como puedes ver, hay ciertos métodos de JavaScript que podemos usar para habilitar la funcionalidad de dibujado en un canvas HTML 5, hay otros métodos de JavaScript que también podemos usar para añadirle otras funcionalidades adicionales.

Nota(s)

  • El código y lo métodos mostrados en este Post, pueden ser modificados, quedar obsoletos o continuar vigentes, esto no depende de mí, si no de los Desarrolladores que dan soporte a JavaScript y HTML 5. 
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.