Easy Javascript Signature Pad

Using Signature Pad library @ https://github.com/szimek/signature_pad

by B

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
<h1>
Sign inside the box, go ahead, try it</h1>
<div class="wrapper">
  <canvas id="signing-box" class="signing-box" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save (generates png)</button>
  <button id="clear">Wipe it</button>
</div>

CSS

.wrapper {
  position: relative;
  width: 100%;
  height: 400px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.signing-box {
  display: block;
  margin: 0 auto;
  border: 3px dashed pink;
  width:400px;
  height:200px;
}

JavaScript

var signingBox = new SignaturePad(document.getElementById('signing-box'), {
  backgroundColor: 'rgba(255, 255, 255, 0)', // this makes the background transparent, yay
  penColor: 'rgb(150, 50, 200)' // this is to chose the color of the sig itself
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function (event) {
  var data = signingBox.toDataURL('image/png');
  window.open(data);
});

cancelButton.addEventListener('click', function (event) {
  signingBox.clear();
});