Signature Pad
A canvas you can draw a signature on, with clear, via Signature Pad.
Requires Bootstrap 5, Signature Pad. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script><div class="card border-0 shadow-sm" style="max-width:340px"><div class="card-body"><label class="form-label small fw-semibold">Sign here</label><canvas id="sgPad" class="border rounded w-100" height="120" style="touch-action:none"></canvas><button class="btn btn-sm btn-outline-secondary mt-2" id="sgClear">Clear</button></div></div>var c=document.getElementById('sgPad');c.width=c.offsetWidth;var pad=new SignaturePad(c,{penColor:'#0d6efd'});
document.getElementById('sgClear').onclick=function(){pad.clear()};Free to use.This component uses Bootstrap 5, Signature Pad (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.