cnc-signature
A signature pad on a canvas. Sign freehand with a pointer or type a name and have it set in a script face, then undo a stroke at a time, clear, or download the result. The value is a PNG data URL, emitted on every change.
Quick start
It needs nothing to work. Sign in the box below and watch the value arrive — a PNG data URL, truncated here because a real one runs to thousands of characters.
(empty)
<div x-data="{ sig: '' }">
<cnc-signature @change="sig = $event.detail.value"></cnc-signature>
</div>Usage guidance
A signature is a raster image, not an identity check — the value is a PNG of whatever was drawn, and it proves only that someone drew it. Treat it as a record of assent alongside the real evidence, not as the evidence. Keep the pad wide: it is far easier to sign in a broad shallow box than a square one, and a cramped pad produces signatures nobody would recognise. Offer Type as an alternative rather than a default; it is the accessible path for anyone who cannot draw with a pointer.