Signature Pad jQuery Plugin

sign.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>

<div class="signature-wrap">
  // Add Form field signature_base_64 and assign it to the form, Field type must be WYSIWYG
  <input type="hidden" class="signature_base_64" name="signature_base_64" value="" />
  <div id="signature-pad">
    <div class="custom-signature-pad--body">
      <canvas id="custom-signature-pad" width="398" height="160" style="touch-action: none;"></canvas>
    </div>
    <div class="signature-pad--actions">
      <button type="button" id="clear" data-action="clear" class="clear btn btn-danger btn-sm">Clear Signature</button>
      <button type="button" id="save" data-action="save" class="clear btn btn-success btn-sm">Save Signature</button>
    </div>
  </div>
</div>

sign.js

	if($('#signature-pad').length>0){
		var wrapper = document.getElementById("signature-pad");
		var clearButton = wrapper.querySelector("[data-action=clear]");
		var saveSignature = wrapper.querySelector("[data-action=save]");
		var canvas = wrapper.querySelector("canvas");
		var signaturePad = new SignaturePad(canvas, {
			backgroundColor: 'rgb(255, 255, 255)'
		});
		//window.onresize = resizeCanvas;
		//resizeCanvas(wrapper);
		clearButton.addEventListener("click", function (event) {
			signaturePad.clear();
			$('.signature_base_64').val('');
		});
		saveSignature.addEventListener("click", function (event) {
			if (signaturePad.isEmpty()) {
				alert("Please sign before saving the signature");
			}else{
				var b64 = signaturePad.toDataURL();
				$('.signature_base_64').val(b64);
				alert("Signature saved successfully");
			}
		});
	}