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

[prueba230683]

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:

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);
}
 

y llamarla así para cada uno de los botones:

Código HTML:

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

function 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);
}