@mocanvas/mocanvas · class

PathBuilder

declare class PathBuilder

This one ships without a description. The signature above is read from the package, and the guides cover the area it belongs to.


Methods · 15

arcTo(rx: number, ry: number, largeArcFlag: boolean, sweepFlag: boolean, xAxisRotationRadians: number, x2: number, y2: number, opts?: PathBuilderCommandOpts): this

SVG-style elliptical arc from the cursor to (x2, y2).

circularArcTo(radius: number, largeArcFlag: boolean, sweepFlag: boolean, x2: number, y2: number, opts?: PathBuilderCommandOpts): this

The circular case of PathBuilder.arcTo: one radius, no rotation.

close(): this

Join the current run back to where it started.

cubicBezierTo(x: number, y: number, cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, opts?: PathBuilderCommandOpts): this

Cubic bézier from the cursor to (x, y) through cp1 and cp2.

static cubicSplineThroughPoints(points: VecLike[], opts?: PathBuilderLineOpts & {

A smooth path through points, as a Catmull-Rom spline converted to cubics.

The curve passes *through* every point rather than being pulled towards it, which is what a freehand line or a curved arrow needs: the points are samples of the intended shape, not control handles.

getRuns(): PathRun[]

The runs this path is made of, as half-open command ranges.

static lineThroughPoints(points: VecLike[], opts?: PathBuilderLineOpts & {

A path through points, one straight segment at a time.

endOffsets pulls both ends back along their own segment by that many units — the way an arrow's shaft stops short of the shapes it binds.

lineTo(x: number, y: number, opts?: PathBuilderCommandOpts): this

Straight segment from the cursor to (x, y).

moveTo(x: number, y: number, opts?: PathBuilderLineOpts): this

Lift the pen and start a new run at (x, y).

toD(opts?: PathBuilderToDOpts): string

This path as an SVG d attribute.

toDrawD(opts: DrawPathBuilderDOpts): string

This path redrawn with a hand-drawn wobble.

Every point is nudged by an amount derived from randomSeed and its own index, so the wobble is stable across re-renders: a shape that jittered differently every frame would shimmer. passes draws the whole outline more than once with different nudges, which is what makes a stroke look gone-over rather than merely crooked.

toGeometry(): Group2d | PathBuilderGeometry2d

This path as shape geometry: one PathBuilderGeometry2d per run, or a Group2d when there is more than one.

A run whose geometry option is false contributes nothing — it is painted but never hit.

toPath2D(opts: PathBuilderOpts): Path2D

This path as a Path2D, for a canvas or overlay that strokes it directly.

Returns an empty Path2D where the constructor is unavailable (a server render, a worker without the canvas API), so a caller never has to guard.

toSvg(opts: PathBuilderOpts): JSX.Element | null

This path as an SVG element, styled per opts, or null when it would draw nothing.

The dash pattern is expressed as stroke-dasharray rather than by cutting the path into pieces: a browser measures the path's own length far more accurately than a flattened polyline can, so the dashes land evenly on curves.

transform(mat: MatLike): PathBuilder

A copy of this path with mat applied to every point, control points included.

Command metadata — fills, dash terminals, draw offsets, close state — is carried across, so a mirrored or scaled path is still renderable and hit-testable without rebuilding it from its parameters.

An arc cannot survive an arbitrary affine map as an arc (a non-uniform scale turns a circle into an ellipse at a new rotation), so arcs are converted to the cubics they were going to be drawn as and those are transformed instead.


Properties · 1

readonly commands: PathBuilderCommand[]

The commands recorded so far, in order. Read by PathBuilderGeometry2d.

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.