Signature

Canvas signature pad that captures pointer and touch strokes, HiDPI aware, with a clear button.

Preview

Attribute	Type	Default	Description
`width`	string	400	Canvas CSS width (number → px, or CSS length)
`height`	string	160	Canvas CSS height (number → px, or CSS length)
`color`	string	var(--pura-fg)	Stroke color
`line-width`	string	2.5	Stroke width in px
`disabled`	boolean	—	Disables drawing and the Clear button

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/signature.js"></script>

JavaScript

import "./pura/lib/signature.js";

change