Skip to main content
Objects on the canvas are stored as shapes in a record keyed by ShapeId.

​
Types

tsdraw includes one shape type with variations:
ToolShape typeGeometry
PendrawFreehand strokes
SquaredrawRectangles
CircledrawEllipses

​
Interface

interface DrawShape {
  id: ShapeId
  type: 'draw'
  x: number
  y: number
  props: {
    color: ColorStyle
    dash: DashStyle
    fill: FillStyle
    size: SizeStyle
    segments: DrawSegment[]
  }
}
  • x / y — top-left origin in page coordinates
  • segments — array of DrawSegment (base64-encoded paths)

​
Styles

Shapes inherit style from the editor at creation:
  • Color — CSS or palette key
  • Size — 's' (2px), 'm' (3.5px), 'l' (5px), 'xl' (10px)
  • Dash — 'draw', 'solid', 'dashed', 'dotted'
  • Fill — 'none', 'semi', 'solid', 'blank'

​
Selection

The select tool picks and manipulates shapes (move, resize, rotate).

​
Codecs

Convert between points and base64 paths: 
import { encodePoints, decodePoints } from '@tsdraw/core'

const encoded = encodePoints([{ x: 0, y: 0 }])
const decoded = decodePoints(encoded)