Scribble

Freehand strokes are modelled by the brush element (BrushElement, type "brush"). A stroke is a list of BrushPoint vertices, each carrying an x/y position plus a width (stroke half-width in local pixels), so pressure-sensitive input produces a variable-width outline.

import { isBrush } from "@oh-just-another/scene";
import type { BrushElement, BrushPoint } from "@oh-just-another/scene";

declare const stroke: BrushElement;
const points: readonly BrushPoint[] = stroke.points;

A stroke whose ends meet and that has a fill colour is committed with closed: true; the renderer then fills the area enclosed by the centreline with style.fill under the stroke body.

Strokes are drawn interactively with the editor's brush mode. The erase mode removes them (and any other element): dragging sweeps an object eraser — hits are previewed dimmed and deleted on release, Alt-dragging un-marks them. Holding Shift at press switches to stroke-erase, which cuts brush strokes into fragments by covered arc length instead of deleting them whole.