TLDrawShape • tldraw Docs

A draw shape represents freehand drawing, sketching, and pen input on the canvas. Draw shapes are composed of segments that can be either smooth curves or straight lines.

type TLDrawShape = TLBaseShape<"draw", TLDrawShapeProps>;

Example

const drawShape: TLDrawShape = {
  id: createShapeId(),
  typeName: "shape",
  type: "draw",
  x: 50,
  y: 50,
  rotation: 0,
  index: "a1",
  parentId: "page:page1",
  isLocked: false,
  opacity: 1,
  props: {
    color: "black",
    fill: "none",
    dash: "solid",
    size: "m",
    segments: [
      {
        type: "free",
        points: [
          { x: 0, y: 0, z: 0.5 },
          { x: 20, y: 15, z: 0.6 },
        ],
      },
    ],
    isComplete: true,
    isClosed: false,
    isPen: false,
    scale: 1,
  },
  meta: {},
};