Por qué CANVAS 1 y 2 dibujan en el CANVAS 3

jovalca · #1 (**permalink**) 09/07/2021, 10:46

Hola a todos y gracias como siempre de antemano, por cualquier ayuda sobre el tema.

Estoy desarrollando una página en HTML y JAVASCRIPT, donde pueda registrar 3 viajeros. A parte de introducir varios datos necesito que los viajeros firmen cada uno en su lugar y para ello he insertado 3 canvas.

Adjunto código:

Código:

<label>Firma del viajero 1</label><br>
<div>
<script type="text/javascript" src="v1sign.js"></script>
<canvas id="v1sign"></canvas>
<br>
<button onclick="javascript:clearArea();return false;">Limpiar</button>
</div><br>

Este código se repite para los viajeros 2 y 3 en diferentes lugares de la página.

El archivo al que llama el script contiene el siguiente código:

Código:

var mousePressedvj1 = false;
var lastXvj1, lastYvj1;
var vj1;

function InitThisvj1() {
    vj1 = document.getElementById('v1sign').getContext("2d");

    $('#v1sign').mousedown(function (e) {
        mousePressedvj1 = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#v1sign').mousemove(function (e) {
        if (mousePressedvj1) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#v1sign').mouseup(function (e) {
        mousePressedvj1 = false;
    });
	    $('#v1sign').mouseleave(function (e) {
        mousePressedvj1 = false;
    });
}

function Draw(x, y, isDown) {
    if (isDown) {
        vj1.beginPath();
        vj1.strokeStyle = "blue";
        vj1.lineWidth = "3";
        vj1.lineJoin = "round";
        vj1.moveTo(lastXvj1, lastYvj1);
        vj1.lineTo(x, y);
        vj1.closePath();
        vj1.stroke();
    }
    lastXvj1 = x; lastYvj1 = y;
}
	
function clearArea() {
    vj1.setTransform(1, 0, 0, 1, 0, 0);
    vj1.clearRect(0, 0, vj1.canvas.width, vj1.canvas.height);
}

Lo que me ocurre es lo siguiente: Al insertar el último código, el del CANVAS 3, el único que funciona es el mismo CANVAS 3, es decir, si yo dibujo en el canvas 1, lo que he pintado se muestra en el canvas 3... si dibujo en el canvas 2 se muestra tambien en el canvas 3... El canvas 1 y 2 no muestran las lineas que dibujo con el ratón... y cada uno debería de ser independiente.

Cada canvas tiene su archivo: v1sign para el canvas 1, v2sign para el canvas 2 y v3sign para el canvas 3, pero el unico que funciona es el 3, de hecho si quito el 3, empieza a funcionar el 2... Los archivos los modifico cada uno con v1sign, v2sign o v3sign segun el caso en

Código:

document.getElementById('v1sign').getContext("2d");

y tambien cambio el nombre de las variables por vj1, vj2 y vj3.

Para llamar las funciones uso esto:

Código:

<script language="javascript">
function startsign(){
    InitThisvj1();
    InitThisvj2();
    InitThisvj3();
}
</script>
</head>
<body onload="startsign()">

He probado unas cuantas cosas y o bien sigo igual o bien deja de funcionar todo directamente y javascript no es mi fuerte... Alguien que haya trabajado con varios canvas puede echarme una mano?

Mil gracias de antemano.
Un abrazo!!

prueba230683 · #2 (**permalink**) 09/07/2021, 15:13

En ese caso, también tienes que cambiar $('#v1sign') por $('#v2sign'), $('#v3sign') etc, para cada uno de los 3 scripts.

Aunque, en lugar de cargar 3 scripts distintos para cada canvas, es mucho mejor tener un único script que defina una función y pasarle un parámetro con el ID del canvas que quieres inicializar. El código sería algo así:

Código Javascript:

Ver originalfunction iniciarCanvas(id_canvas){
    var mousePressedvj = false;
    var lastXvj, lastYvj;
    var vj;
 
    function InitThisvj() {
        vj = document.getElementById(id_canvas).getContext("2d");
 
        var canvas = $('#' + id_canvas);
 
        canvas.mousedown(function (e) {
            mousePressedvj = true;
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
        });
 
        canvas.mousemove(function (e) {
            if (mousePressedvj) {
                Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
            }
        });
 
        canvas.mouseup(function (e) {
            mousePressedvj = false;
        });
        canvas.mouseleave(function (e) {
            mousePressedvj = false;
        });
    }
 
    function Draw(x, y, isDown) {
        if (isDown) {
            vj.beginPath();
            vj.strokeStyle = "blue";
            vj.lineWidth = "3";
            vj.lineJoin = "round";
            vj.moveTo(lastXvj, lastYvj);
            vj.lineTo(x, y);
            vj.closePath();
            vj.stroke();
        }
        lastXvj = x; lastYvj = y;
    }
        
    function clearArea() {
        vj.setTransform(1, 0, 0, 1, 0, 0);
        vj.clearRect(0, 0, vj.canvas.width, vj.canvas.height);
    }
 
    InitThisvj();
}

Y lo deberías inicializar así:

Código HTML:

Ver original<script language="javascript">
function startsign(){
    iniciarCanvas("v1sign");
    iniciarCanvas("v2sign");
    iniciarCanvas("v3sign");
}
</script>
</head>
<body onload="startsign()">

Así solo tendrías que cargar el script una vez.

jovalca · #3 (**permalink**) 09/07/2021, 23:30

Hola prueba230683.

Si, había probado algo parecido y no me había funcionado por eso lo estaba intentando con archivos separados... Pero este código que me envías funciona a la perfección, muchísimas gracias.

Lo único que ahora no me funciona el botón de limpiar para cada uno de los canvas, por si los viajeros se equivocan al hacer la firma.

Supongo que la función vale la misma no? Sólo habría que indicarle el canvas que tiene borrar... imagino que con algo así?

Código:

var cv = $('#' + id_canvas);
function clearArea() {
        cv.setTransform(1, 0, 0, 1, 0, 0);
        cv.clearRect(0, 0, cv.canvas.width, cv.canvas.height);
    }

Gracias de nuevo.
Un abrazo!!

prueba230683 · #4 (**permalink**) 10/07/2021, 12:04

Cita:

Lo único que ahora no me funciona el botón de limpiar para cada uno de los canvas, por si los viajeros se equivocan al hacer la firma.

Cierto. Como bien dices, tendrías que añadir al script una función así:

Código Javascript:

Ver originalfunction limpiarCanvas(id_canvas) {
    var vj = document.getElementById(id_canvas).getContext("2d");
    vj.setTransform(1, 0, 0, 1, 0, 0);
    vj.clearRect(0, 0, vj.canvas.width, vj.canvas.height);
}

y llamarla así para cada uno de los botones:

Código HTML:

Ver original<button onclick="limpiarCanvas("v1sign");return false;">Limpiar</button>
 
<button onclick="limpiarCanvas("v2sign");return false;">Limpiar</button>
 
<button onclick="limpiarCanvas("v3sign");return false;">Limpiar</button>

En definitiva, el script completo sería este:

Código Javascript:

Ver originalfunction iniciarCanvas(id_canvas){
    var mousePressedvj = false;
    var lastXvj, lastYvj;
    var vj;
 
    function InitThisvj() {
        vj = document.getElementById(id_canvas).getContext("2d");
 
        var canvas = $('#' + id_canvas);
 
        canvas.mousedown(function (e) {
            mousePressedvj = true;
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
        });
 
        canvas.mousemove(function (e) {
            if (mousePressedvj) {
                Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
            }
        });
 
        canvas.mouseup(function (e) {
            mousePressedvj = false;
        });
        canvas.mouseleave(function (e) {
            mousePressedvj = false;
        });
    }
 
    function Draw(x, y, isDown) {
        if (isDown) {
            vj.beginPath();
            vj.strokeStyle = "blue";
            vj.lineWidth = "3";
            vj.lineJoin = "round";
            vj.moveTo(lastXvj, lastYvj);
            vj.lineTo(x, y);
            vj.closePath();
            vj.stroke();
        }
        lastXvj = x; lastYvj = y;
    }
 
    InitThisvj();
}
        
function limpiarCanvas(id_canvas) {
    var vj = document.getElementById(id_canvas).getContext("2d");
    vj.setTransform(1, 0, 0, 1, 0, 0);
    vj.clearRect(0, 0, vj.canvas.width, vj.canvas.height);
}

jovalca · #5 (**permalink**) 11/07/2021, 00:38

Hola prueba230683.

Gracias de nuevo por tu respuesta. Así lo he hecho, ya he colocado todo el código, en un solo archivo y todo funciona bien, salvo la funcion de borrar que no produce ningun resultado... lo he revisado varias veces y debería funcionar, yo lo veo todo OK pero... tienes alguna idea porque no borra ningun canvas?

Gracias.
Un Saludo.!

prueba230683 · #6 (**permalink**) 11/07/2021, 11:57

Oops, puse dobles comillas. Tienen que ser comillas simples para no romper la sintaxis html:

Código HTML:

Ver original<button onclick="limpiarCanvas('v1sign');return false;">Limpiar</button>
 
<button onclick="limpiarCanvas('v2sign');return false;">Limpiar</button>
 
<button onclick="limpiarCanvas('v3sign');return false;">Limpiar</button>

DEMO