TLScribble

A scribble object representing a drawing stroke in tldraw.

Scribbles are temporary drawing strokes that appear during freehand drawing operations. They provide visual feedback as the user draws and can be styled with various properties like size, color, and effects.

interface TLScribble {}

Example

// A basic scribble stroke
const scribble: TLScribble = {
  id: 'scribble-123',
  points: [
    { x: 0, y: 0, z: 0.5 },
    { x: 10, y: 5, z: 0.7 },
    { x: 20, y: 10, z: 0.6 },
  ],
  size: 4,
  color: 'black',
  opacity: 0.8,
  state: 'active',
  delay: 0,
  shrink: 0.1,
  taper: true,
}

// A laser pointer scribble
const laserScribble: TLScribble = {
  id: 'laser-pointer',
  points: [{ x: 50, y: 50, z: 1.0 }],
  size: 8,
  color: 'laser',
  opacity: 1.0,
  state: 'active',
  delay: 100,
  shrink: 0,
  taper: false,
}

Properties

The color of the scribble using canvas UI color types

color: TLCanvasUiColor

Time delay in milliseconds for animation effects

delay: number

Unique identifier for the scribble

id: string

The opacity of the scribble (0-1)

opacity: number

Array of points that make up the scribble path

points: VecModel[]

Amount the stroke should shrink over time (0-1)

shrink: number

The brush size/width of the scribble stroke

size: number

The current state of the scribble drawing

state: SetValue<typeof TL_SCRIBBLE_STATES>

Whether the stroke should taper at the ends

taper: boolean