Dibujo a Mano Libre con Canvas

Una librería en JavaScript que permite dibujar a mano libre sobre un canvas HTML con una imagen de fondo. Ideal para agregar funcionalidad de dibujo y personalización en tus aplicaciones web.

Uso

Primero, importa la clase WriteImage en tu archivo JavaScript (Asegurate que tu cambas tenga los atrubutos width and height para obtener los datos):

import WriteImage from './src/Dibujo';

Luego, inicializa el canvas y la imagen que quieres usar como fondo:

const dibujo = new Dibujo({ canvas: document.getElementById("canvas"), imageUrl: 'image.png', color: "#fff", lineWidth: 1 });

Puedes cambiar el color del lápiz utilizando el método setColor. Esto permite personalizar el color de los trazos mientras se dibuja:

dibujo.setColor('#00ff00');

Para borrar el contenido del canvas sin eliminar la imagen de fondo, utiliza el método clearCanvas:

dibujo.clearCanvas();

Puedes obtener la imagen actual, con el dibujo sobre ella, en formato PNG utilizando el método downloadImage:

dibujo.getImage();

Características

• Dibujo a mano libre con soporte para cambiar el color del lápiz.
• Borrar el contenido del canvas sin eliminar la imagen de fondo.
• Descargar la imagen con el dibujo en formato PNG.
• Fácil de integrar en proyectos web.

Instalación

Instala el paquete desde npm:

npm install write_picture