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

Nube Colectiva

hace 4 años

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):


 const canvas = document.querySelector('#micanvas');

 const contenedor = canvas.getContext('2d');

 // Usamos todo el alto y ancho disponible para el canvas
 canvas.height = window.innerHeight;
 canvas.width = window.innerWidth;

 // Ancho del Trazo 
 contenedor.lineWidth = 5;

 // Trazo redondeado 
 contenedor.lineCap = 'round';

 // Color del trazo del dibujo en el Canvas 
 contenedor.strokeStyle = '#5858ef';

 // No permitir dibujar hasta que no presione el botón del mouse 
 let estaDibujando = false;

 // Desde dónde comenzar una línea y luego dónde terminarla
 let vectorX = 0;
 let vectorY = 0;

 let direccion = true;

 function dibujo(evento) {

  //Solo permitir dibujar haciendo clic y arrastrando el puntero del mouse 
  if (!estaDibujando)
    return;

  console.log(evento);

  contenedor.beginPath();
  // El cursor para comenzar a dibujar se mueve a esta coordenada        
  contenedor.moveTo(vectorX, vectorY);

  // Se traza una línea desde el inicio 
  contenedor.lineTo(evento.offsetX, evento.offsetY);

  // Dibujamos las líneas 
  contenedor.stroke();

  [vectorX, vectorY] = [evento.offsetX, evento.offsetY];


  if(contenedor.lineWidth >= 80 || contenedor.lineWidth <= 1){
    direccion = !direccion;
  }

  if(direccion)
    contenedor.lineWidth++;
  else
    contenedor.lineWidth--;

 }

 // Eventos del Mouse 
 canvas.addEventListener('mousemove', dibujo);
 canvas.addEventListener('mousedown', (evento)=>{
  // Permitir dibujar cuando se presiona el botón del mouse 
  estaDibujando = true;

  [vectorX, vectorY] = [evento.offsetX, evento.offsetY];
 });

 // Eventos del Mouse 
 canvas.addEventListener('mouseup', ()=>estaDibujando = false);
 canvas.addEventListener('mouseout', ()=>estaDibujando = false);


 /* Usar Canvas en Dispositivos Móviles */

 // Dibujar al tocar la pantalla del dispositivo móvil
 document.body.addEventListener("touchstart", function(evento) {
  if (evento.target == canvas) {
    evento.preventDefault();
    clienteX = evento.touches[0].clientX;
    clienteY = evento.touches[0].clientY;
    estaDibujando = true;
    dibujo(clienteX, clienteY)
  }
 }, false);

 // No Dibujar al dejar de tocar la pantalla del dispositivo móvil
 document.body.addEventListener("touchend", function(evento) {
  if (evento.target == canvas) {
    evento.preventDefault();
    estaDibujando = false;
  }
 }, false);

 // Permitir desplazarse en la pantalla del dispositivo móvil
 document.body.addEventListener("touchmove", function(evento) {
  if (evento.target == canvas) {
    evento.preventDefault();
    evento.offsetX = evento.targetTouches[0].clientX;
    evento.offsetY = evento.targetTouches[0].clientY;
    dibujo(evento)
  }
 }, false);

100

101

102

103

104

const canvas = document.querySelector('#micanvas');

const contenedor = canvas.getContext('2d');

// Usamos todo el alto y ancho disponible para el canvas

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

// Ancho del Trazo

contenedor.lineWidth = 5;

// Trazo redondeado

contenedor.lineCap = 'round';

// Color del trazo del dibujo en el Canvas

contenedor.strokeStyle = '#5858ef';

// No permitir dibujar hasta que no presione el botón del mouse

let estaDibujando = false;

// Desde dónde comenzar una línea y luego dónde terminarla

let vectorX = 0;

let vectorY = 0;

let direccion = true;

function dibujo(evento) {

//Solo permitir dibujar haciendo clic y arrastrando el puntero del mouse

if (!estaDibujando)

return;

console.log(evento);

contenedor.beginPath();

// El cursor para comenzar a dibujar se mueve a esta coordenada

contenedor.moveTo(vectorX, vectorY);

// Se traza una línea desde el inicio

contenedor.lineTo(evento.offsetX, evento.offsetY);

// Dibujamos las líneas

contenedor.stroke();

[vectorX, vectorY] = [evento.offsetX, evento.offsetY];

if(contenedor.lineWidth >= 80 || contenedor.lineWidth <= 1){

direccion = !direccion;

}

if(direccion)

contenedor.lineWidth++;

else

contenedor.lineWidth--;

}

// Eventos del Mouse

canvas.addEventListener('mousemove', dibujo);

canvas.addEventListener('mousedown', (evento)=>{

// Permitir dibujar cuando se presiona el botón del mouse

estaDibujando = true;

[vectorX, vectorY] = [evento.offsetX, evento.offsetY];

});

// Eventos del Mouse

canvas.addEventListener('mouseup', ()=>estaDibujando = false);

canvas.addEventListener('mouseout', ()=>estaDibujando = false);

/* Usar Canvas en Dispositivos Móviles */

// Dibujar al tocar la pantalla del dispositivo móvil

document.body.addEventListener("touchstart", function(evento) {

if (evento.target == canvas) {

evento.preventDefault();

clienteX = evento.touches[0].clientX;

clienteY = evento.touches[0].clientY;

estaDibujando = true;

dibujo(clienteX, clienteY)

}

}, false);

// No Dibujar al dejar de tocar la pantalla del dispositivo móvil

document.body.addEventListener("touchend", function(evento) {

if (evento.target == canvas) {

evento.preventDefault();

estaDibujando = false;

}

}, false);

// Permitir desplazarse en la pantalla del dispositivo móvil

document.body.addEventListener("touchmove", function(evento) {

if (evento.target == canvas) {

evento.preventDefault();

evento.offsetX = evento.targetTouches[0].clientX;

evento.offsetY = evento.targetTouches[0].clientY;

dibujo(evento)

}

}, false);

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.


<canvas id="micanvas"></canvas>

Y le doy los siguientes estilos CSS:


#micanvas {
      border: solid 3px gray; 
}

#micanvas {

border: solid 3px gray;

}

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.