JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<canvas></canvas>

<button>done</button>

CSS

canvas {
  border: 1px solid red;
}

JavaScript

var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
                backgroundColor: 'rgb(242, 242, 242)',
                onEnd: () => this.signed = true,
                penColor: 'rgb(0, 59, 77)',

});

document.querySelector('button').addEventListener('click', function() {
	if (signaturePad.points.length) {
  	alert('signature happened');
  } else {
  	alert('please sign');
  }
})