JSFiddle - React, Tailwind, and code Playground

JavaScript

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;
	
var siginput1 = document.getElementById("siginput1")

canvas1.addEventListener("mouseup", function(event) {
    if (signaturePad1.isEmpty()) {
        siginput1.value = '';
    } 
	else {
        siginput1.value = signaturePad1.toDataURL('image/png');
    }
});

function clear1() { signaturePad1.clear(); }

function resizeCanvas(canvas) {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = 250;
	canvas.height = 150;
}

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

$("#clear1").click(clear1);