Canvas

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

Installation

npx @obi/ui add canvas

Preview

Usage

import { Canvas } from '@/src/components/Canvas/Canvas';

export default function Example() {
  return (
    <Canvas
      height={400}
      defaultColor="#18181b"
      defaultStrokeWidth={4}
    />
  );
}

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.