JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body onload="startsign()">
<div class="table">
  <div class="tr">
    <div class="td">Firma del viajero 1</div>
    <div class="td">Firma del viajero 2</div>
    <div class="td">Firma del viajero 3</div>
  </div>
  <div class="tr">
    <div class="td"><canvas class="td" id="v1sign"></canvas></div>
    <div class="td"><canvas class="td" id="v2sign"></canvas></div>
    <div class="td"><canvas class="td" id="v3sign"></canvas></div>
  </div>
  <div class="tr">
    <div class="td"><button onclick="limpiarCanvas('v1sign');return false;">Limpiar</button></div>
    <div class="td"><button onclick="limpiarCanvas('v2sign');return false;">Limpiar</button></div>
    <div class="td"><button onclick="limpiarCanvas('v3sign');return false;">Limpiar</button></div>
  </div>
</div>
</body>
</html>

CSS

canvas {
  border: 1px solid black;
}
.table {
    display: table;
    border-spacing: 20px 10px;
}
.tr {
    display: table-row;
}
.td {
    display: table-cell;
}

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

function startsign(){
    iniciarCanvas("v1sign");
    iniciarCanvas("v2sign");
    iniciarCanvas("v3sign");
}