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: {},
}