@mocanvas/mocanvas · class
declare class PathBuilderThis 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): thisSVG-style elliptical arc from the cursor to (x2, y2).
circularArcTo(radius: number, largeArcFlag: boolean, sweepFlag: boolean, x2: number, y2: number, opts?: PathBuilderCommandOpts): thisThe circular case of PathBuilder.arcTo: one radius, no rotation.
close(): thisJoin the current run back to where it started.
cubicBezierTo(x: number, y: number, cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, opts?: PathBuilderCommandOpts): thisCubic 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): thisStraight segment from the cursor to (x, y).
moveTo(x: number, y: number, opts?: PathBuilderLineOpts): thisLift the pen and start a new run at (x, y).
toD(opts?: PathBuilderToDOpts): stringThis path as an SVG d attribute.
toDrawD(opts: DrawPathBuilderDOpts): stringThis 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 | PathBuilderGeometry2dThis 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): Path2DThis 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 | nullThis 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): PathBuilderA 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.