TLScribble • tldraw Docs

Table of contents

color
delay
id
opacity
points
shrink
size
state
taper
Properties

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

color

The color of the scribble using canvas UI color types

color: TLCanvasUiColor;

delay

Time delay in milliseconds for animation effects

delay: number;

id

Unique identifier for the scribble

id: string;

opacity

The opacity of the scribble (0-1)

opacity: number;

points

Array of points that make up the scribble path

points: VecModel[];

shrink

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

shrink: number;

size

The brush size/width of the scribble stroke

size: number;

state

The current state of the scribble drawing

state: SetValue<typeof TL_SCRIBBLE_STATES>;

taper

Whether the stroke should taper at the ends

taper: boolean;