Canvas

A freehand drawing surface with pen and eraser tools, color palette, variable stroke widths, undo/redo, and PNG download.

Installation

npx dafink-ui add canvas

Demo

Props

Name	Type	Default	Description
width	number	container width	Canvas width in px. Defaults to responsive container width.
height	number	400	Canvas height in px.
defaultColor	string	'#18181b'	Initial stroke color.
defaultStrokeWidth	number	4	Initial stroke width in px.
showToolbar	boolean	true	Whether to render the built-in toolbar.
className	string	""	Extra classes on the wrapper div.

Accessibility

Canvas has no custom focus management: every toolbar control (tool selector, color swatches, stroke width, undo/redo, clear, download) is a native button reachable with Tab and activated with Enter/Space, in plain document order. The color swatches expose role="radio" inside a role="radiogroup", but there is no roving-tabindex or arrow-key handling wired up for that group, so in practice each swatch is its own ordinary tab stop rather than following the full ARIA radiogroup keyboard pattern. The drawing surface itself is pointer-only: it's exposed to assistive tech as a static role="img" with aria-label="Drawing canvas", since there is no keyboard equivalent for freehand drawing.