JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
<div class="wrapper">
  <img src="http://www.hostcia.net/testes/html5Assinatura/Hatch.jpg" width=250 height=367 />
  <canvas id="signature-pad" class="signature-pad" width=250 height=367></canvas>
</div>
<div>


<button type="button" value="" id="save" onClick="getValues();save.performClick(this.value);">Save</button>
  <button type="button" id="clear">Clear</button>
  
  <script>
    var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      penColor: 'rgb(0, 0, 0)'
    });

 function getValues() {
 var data = signaturePad.toDataURL('image/png');
    document.getElementById("save").value = data;
    }
</script>
</div>

CSS

.wrapper {
  position: relative;
  width: 250px;
  height: 367px;
  -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: 250px;
  height: 367px;
}

JavaScript

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