¿Como colocar dos SignaturePad que funcionen dentro de la misma página?

¡Que tal amigos de la comunidad Todo expertos! Pido amablemente que me puedan brindar ayuda con lo siguiente.

Estoy haciendo un formulario donde se pueda colocar tanto la firma de un solicitante como la firma del que aplico la solicitud por medio de un signaturePad mediante Javascript.

O sea que necesito que el formulario tenga dos firmas distintas.

Encontré un ejemplo muy practico que permite colocar una firma (fuente: https://jsfiddle.net/szimek/d6a78gwq/}.

Pero el desafío que he encontrado en la implementación de esta útil herramienta es que al poner un segundo SignaturePad este no registra nada, ni hace nada solo aparece la zona donde se deberia colocar la firma.

Les comparto mi código fuente para que me puedan ilustrar que es lo que tengo que cambiar o realizar para que funcione apropiadamente.

<html>
<head>
  <title></title>
  <script>
    type="text/javascript"
    src="/js/lib/dummy.js"
      </script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
  <style id="compiled-css" type="text/css">
      .wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
img {
  position: absolute;
  left: 0;
  top: 0;
}
.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:200px;
}
      .wrapper2 {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.signature-pad2 {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:200px;
}
  </style>
  <script type="text/javascript">
    window.onload=function(){
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');
saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');
// Send data to server instead...
  window.open(data);
});
cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');
saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');
// Send data to server instead...
  window.open(data);
});
cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});
}   
</script>
</head>
<body>
 <h1>
  Draw over image
</h1>
<div class="wrapper">
  <img src="https://preview.ibb.co/jnW4Qz/Grumpy_Cat_920x584.jpg" width=400 height=200 />
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>
<div class="wrapper2">
  <img src="https://preview.ibb.co/jnW4Qz/Grumpy_Cat_920x584.jpg" width=400 height=200 />
  <canvas id="signature-pad2" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>
    <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "d6a78gwq"
      }], "*")
    }
  </script>
</body>
</html>

Añade tu respuesta

Haz clic para o