ShapeDraw Item

Represents a custom Bezier shape drawn by the user with the shape drawing tool. Unlike Shape items (which use a preset SVG path), ShapeDraw items are created from freehand Bezier strokes drawn directly on the canvas.

Creating a ShapeDraw Item

ShapeDraw items are not created with addItem. Instead, the user draws a shape on the canvas using the shape drawing tool, then calls saveDrawShape() from useDraw to commit it as an item.

function DrawControls() {
  const { changeDrawMode, setDrawType, saveDrawShape, isDrawMode } = useDraw();

  function startDrawing() {
    setDrawType("shape");
    changeDrawMode("draw");
  }

  return (
    <div>
      <button onClick={startDrawing}>Draw Shape</button>
      {isDrawMode && <button onClick={saveDrawShape}>Save Shape</button>}
    </div>
  );
}

When saveDrawShape() is called, the drawn shape is added to the canvas as a ShapeDraw item. Pressing Enter while in draw mode also saves the shape.

Receiving the Saved Shape

You can receive the saved ShapeDrawItemType via the onSaveDrawShape prop on StudioProvider. This is useful for persisting drawn shapes on your backend.

<SessionProvider onCreateSession={createSession}>
  <StudioProvider
    onSaveDrawShape={(shape) => {
      console.log("Saved shape:", shape);
      // persist to your backend
    }}
  >
    <Studio />
  </StudioProvider>
</SessionProvider>

Properties

All properties below are passed inside itemProps.

Property	Type	Description
vertices	number[]	Flattened array of normalized vertex coordinates [x0, y0, x1, y1, ...]. Required.
controls	number[]	Flattened array of normalized Bezier control point coordinates.
stroke	string	Stroke color (hex). Required.
strokeWidth	number	Stroke thickness in pixels. Required.
fill	string	Fill color (hex).
cornerRadius	number	Corner radius applied to the shape.
shadowEnabled	boolean	Enable or disable the shadow.
shadowColor	string	Shadow color.
shadowBlur	number	Shadow blur radius.
shadowOffsetX	number	Shadow horizontal offset.
shadowOffsetY	number	Shadow vertical offset.

Notes

• vertices and controls are normalized to the item's bounding box (0–1 range), so the shape scales correctly when the item is resized.
• The drawing tool settings (drawColor, drawStrokeWidth, drawFillColor) from useDraw are applied automatically when the shape is saved.

Related

• useDraw
• Shape Item