Pizarra de Dibujo

Sois creadores de dibujos, descubre la Pizarra de Dibujo, y demuestra tus habilidades. Se trata de un lienzo negro para dibujar lo que quieras.

Es un script para dibujar con el ratón en el ordenador, y de forma táctil en otros dispositivos electrónicos. Se construye sin depender de ninguna librería externa (como pueda ser jQuery), solo Javascript Vainilla y la etiqueta Canvas. Crea tus dibujos a mano alzada, con esta Pizarra de Dibujo.

Haz clic dentro del cuadro para dibujar

Puedes ver también como funciona un Editor de Firma Digital más completo, en el siguiente enlace

La captura de la firma para documentos es ya una realidad en múltiples sectores: correos, paquetería, supermercados, notarías, etc. Con un módulo de firma digital, sus procesos de captura de firma quedan reducidos a un único trabajo: QUE EL CLIENTE FIRME LA TABLETA DE CAPTURA DE FIRMA.

HTML

Declaramos nuestra etiqueta canvas, donde se dibujarán las líneas.

<canvas id="pizarra"></canvas>

CSS

Le damos un tamaño y un color.

canvas {
    width: 1200px;
    height: 1200px;
    background-color: #1E24FF;
}

Javascript

Es importante que miCanvas.width y miCanvas.height tengan el mismo tamaño que los declarados en el CSS, sino la línea se saldrá del lienzo.

//======================================================================
// VARIABLES
//======================================================================
let miCanvas = document.querySelector('#pizarra');
let lineas = [];
let correccionX = 0;
let correccionY = 0;
let pintarLinea = false;
// Marca el nuevo punto
let nuevaPosicionX = 0;
let nuevaPosicionY = 0;

let posicion = miCanvas.getBoundingClientRect()
correccionX = posicion.x;
correccionY = posicion.y;

miCanvas.width = 1200;
miCanvas.height = 1200;

//======================================================================
// FUNCIONES
//======================================================================

/**
 * Funcion que empieza a dibujar la linea
 */
function empezarDibujo() {
    pintarLinea = true;
    lineas.push([]);
};

/**
 * Funcion que guarda la posicion de la nueva línea
 */
function guardarLinea() {
    lineas[lineas.length - 1].push({
        x: nuevaPosicionX,
        y: nuevaPosicionY
    });
}

/**
 * Funcion dibuja la linea
 */
function dibujarLinea(event) {
    event.preventDefault();
    if (pintarLinea) {
        let ctx = miCanvas.getContext('2d')
        // Estilos de linea
        ctx.lineJoin = ctx.lineCap = 'round';
        ctx.lineWidth = 10;
        // Color de la linea
        ctx.strokeStyle = '#fff';
        // Marca el nuevo punto
        if (event.changedTouches == undefined) {
            // Versión ratón
            nuevaPosicionX = event.layerX;
            nuevaPosicionY = event.layerY;
        } else {
            // Versión touch, pantalla tactil
            nuevaPosicionX = event.changedTouches[0].pageX - correccionX;
            nuevaPosicionY = event.changedTouches[0].pageY - correccionY;
        }
        // Guarda la linea
        guardarLinea();
        // Redibuja todas las lineas guardadas
        ctx.beginPath();
        lineas.forEach(function (segmento) {
            ctx.moveTo(segmento[0].x, segmento[0].y);
            segmento.forEach(function (punto, index) {
                ctx.lineTo(punto.x, punto.y);
            });
        });
        ctx.stroke();
    }
}

/**
 * Funcion que deja de dibujar la linea
 */
function pararDibujar () {
    pintarLinea = false;
    guardarLinea();
}

//======================================================================
// EVENTOS
//======================================================================

// Eventos raton
miCanvas.addEventListener('mousedown', empezarDibujo, false);
miCanvas.addEventListener('mousemove', dibujarLinea, false);
miCanvas.addEventListener('mouseup', pararDibujar, false);

// Eventos pantallas táctiles
miCanvas.addEventListener('touchstart', empezarDibujo, false);
miCanvas.addEventListener('touchmove', dibujarLinea, false);

Para llevar esta Pizarra de Dibujo a tu sitio web, haz clic en el enlace de abajo.

VER EL CÓDIGO COMPLETO AQUÍ