Draw Item

Represents a pen stroke drawn on the canvas. Draw items are created automatically when the user draws in freehand or straight line mode.

Creating a Draw Item

Draw items are created by the user through the useDraw hook. To activate freehand or straight drawing:

const { changeDrawMode, setDrawType } = useDraw()

// Freehand stroke
setDrawType('free')
changeDrawMode('draw')

// Straight line
setDrawType('straight')
changeDrawMode('draw')

Each completed stroke is automatically saved as a Draw item on the canvas.

Properties

All properties below are passed inside itemProps.

Property	Type	Description
points	number[]	Flattened array of stroke coordinates [x0, y0, x1, y1, ...]. Required.
color	string	Stroke color (hex). Required.
strokeWidth	number	Stroke thickness in pixels. Required.
strokeStyle	'solid' | 'doodle'	Stroke rendering style.
dash	number[]	Dash pattern (e.g. [10, 5] for dashed lines).

Notes

• points is a flattened coordinate array, not an array of objects.
• The active drawing settings (drawColor, drawStrokeWidth, drawStrokeStyle, drawDash) from useDraw are applied automatically when a stroke is completed.

Related

• useDraw hook
• ShapeDraw item