Signature Pad with Save
A signature canvas that exports the drawing as a PNG, 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 & save</label>
<canvas id="ssPad" class="border rounded w-100" height="110" style="touch-action:none"></canvas>
<div class="d-flex gap-2 mt-2"><button class="btn btn-sm btn-outline-secondary" id="ssClear">Clear</button><button class="btn btn-sm btn-primary" id="ssSave">Save PNG</button></div>
<img id="ssOut" class="mt-2 border rounded" style="max-width:100%;display:none">
</div></div>var c=document.getElementById('ssPad');c.width=c.offsetWidth;var pad=new SignaturePad(c,{penColor:'#0d6efd'});
document.getElementById('ssClear').onclick=function(){pad.clear();document.getElementById('ssOut').style.display='none'};
document.getElementById('ssSave').onclick=function(){if(pad.isEmpty())return;var o=document.getElementById('ssOut');o.src=pad.toDataURL();o.style.display='block'};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.