Skip to main content
Module

x/canvas/mod.ts>Path

Canvas API for Deno, ported from canvaskit-wasm (Skia).
Latest
interface Path
implements EmbindObject<Path>
import { type Path } from "https://deno.land/x/canvas@v1.4.1/mod.ts";

See SkPath.h for more information on this class.

Methods

addArc(
oval: InputRect,
startAngle: AngleInDegrees,
sweepAngle: AngleInDegrees,
): Path

Appends arc to Path, as the start of new contour. Arc added is part of ellipse bounded by oval, from startAngle through sweepAngle. Both startAngle and sweepAngle are measured in degrees, where zero degrees is aligned with the positive x-axis, and positive sweeps extends arc clockwise. Returns the modified path for easier chaining.

addOval(
oval: InputRect,
isCCW?: boolean,
startIndex?: number,
): Path

Adds oval to Path, appending kMove_Verb, four kConic_Verb, and kClose_Verb. Oval is upright ellipse bounded by Rect oval with radii equal to half oval width and half oval height. Oval begins at start and continues clockwise by default. Returns the modified path for easier chaining.

addPath(...args: any[]): Path | null

Takes 1, 2, 7, or 10 required args, where the first arg is always the path. The last arg is an optional boolean and chooses between add or extend mode. The options for the remaining args are:

  • an array of 6 or 9 parameters (perspective is optional)
  • the 9 parameters of a full matrix or the 6 non-perspective params of a matrix. Returns the modified path for easier chaining (or null if params were incorrect).
addPoly(points: InputFlattenedPointArray, close: boolean): Path

Adds contour created from array of n points, adding (count - 1) line segments. Contour added starts at pts[0], then adds a line for every additional point in pts array. If close is true, appends kClose_Verb to Path, connecting pts[count - 1] and pts[0]. Returns the modified path for easier chaining.

addRect(rect: InputRect, isCCW?: boolean): Path

Adds Rect to Path, appending kMove_Verb, three kLine_Verb, and kClose_Verb, starting with top-left corner of Rect; followed by top-right, bottom-right, and bottom-left if isCCW is false; or followed by bottom-left, bottom-right, and top-right if isCCW is true. Returns the modified path for easier chaining.

addRRect(rrect: InputRRect, isCCW?: boolean): Path

Adds rrect to Path, creating a new closed contour. Returns the modified path for easier chaining.

addVerbsPointsWeights(
verbs: VerbList,
weights?: WeightList,
): Path

Adds the given verbs and associated points/weights to the path. The process reads the first verb from verbs and then the appropriate number of points from the FlattenedPointArray (e.g. 2 points for moveTo, 4 points for quadTo, etc). If the verb is a conic, a weight will be read from the WeightList. Returns the modified path for easier chaining

arc(
x: number,
y: number,
radius: number,
startAngle: AngleInRadians,
endAngle: AngleInRadians,
isCCW?: boolean,
): Path

Adds an arc to this path, emulating the Canvas2D behavior. Returns the modified path for easier chaining.

arcToOval(
oval: InputRect,
startAngle: AngleInDegrees,
endAngle: AngleInDegrees,
forceMoveTo: boolean,
): Path

Appends arc to Path. Arc added is part of ellipse bounded by oval, from startAngle through sweepAngle. Both startAngle and sweepAngle are measured in degrees, where zero degrees is aligned with the positive x-axis, and positive sweeps extends arc clockwise. Returns the modified path for easier chaining.

arcToRotated(
rx: number,
ry: number,
xAxisRotate: AngleInDegrees,
useSmallArc: boolean,
isCCW: boolean,
x: number,
y: number,
): Path

Appends arc to Path. Arc is implemented by one or more conics weighted to describe part of oval with radii (rx, ry) rotated by xAxisRotate degrees. Arc curves from last Path Point to (x, y), choosing one of four possible routes: clockwise or counterclockwise, and smaller or larger. See SkPath.h for more details. Returns the modified path for easier chaining.

arcToTangent(
x1: number,
y1: number,
x2: number,
y2: number,
radius: number,
): Path

Appends arc to Path, after appending line if needed. Arc is implemented by conic weighted to describe part of circle. Arc is contained by tangent from last Path point to (x1, y1), and tangent from (x1, y1) to (x2, y2). Arc is part of circle sized to radius, positioned so it touches both tangent lines. Returns the modified path for easier chaining.

close(): Path

Appends CLOSE_VERB to Path. A closed contour connects the first and last point with a line, forming a continuous loop. Returns the modified path for easier chaining.

computeTightBounds(outputArray?: Rect): Rect

Returns minimum and maximum axes values of the lines and curves in Path. Returns (0, 0, 0, 0) if Path contains no points. Returned bounds width and height may be larger or smaller than area affected when Path is drawn.

Behaves identically to getBounds() when Path contains only lines. If Path contains curves, computed bounds includes the maximum extent of the quad, conic, or cubic; is slower than getBounds(); and unlike getBounds(), does not cache the result.

conicTo(
x1: number,
y1: number,
x2: number,
y2: number,
w: number,
): Path

Adds conic from last point towards (x1, y1), to (x2, y2), weighted by w. If Path is empty, or path is closed, the last point is set to (0, 0) before adding conic. Returns the modified path for easier chaining.

contains(x: number, y: number): boolean

Returns true if the point (x, y) is contained by Path, taking into account FillType.

copy(): Path

Returns a copy of this Path.

countPoints(): number

Returns the number of points in this path. Initially zero.

cubicTo(
cpx1: number,
cpy1: number,
cpx2: number,
cpy2: number,
x: number,
y: number,
): Path

Adds cubic from last point towards (x1, y1), then towards (x2, y2), ending at (x3, y3). If Path is empty, or path is closed, the last point is set to (0, 0) before adding cubic.

dash(
on: number,
off: number,
phase: number,
): boolean

Changes this path to be the dashed version of itself. This is the same effect as creating a DashPathEffect and calling filterPath on this path.

equals(other: Path): boolean

Returns true if other path is equal to this path.

getBounds(outputArray?: Rect): Rect

Returns minimum and maximum axes values of Point array. Returns (0, 0, 0, 0) if Path contains no points. Returned bounds width and height may be larger or smaller than area affected when Path is drawn.

getFillType(): FillType

Return the FillType for this path.

getPoint(index: number, outputArray?: Point): Point

Returns the Point at index in Point array. Valid range for index is 0 to countPoints() - 1.

isEmpty(): boolean

Returns true if there are no verbs in the path.

isVolatile(): boolean

Returns true if the path is volatile; it will not be altered or discarded by the caller after it is drawn. Path by default have volatile set false, allowing Surface to attach a cache of data which speeds repeated drawing. If true, Surface may not speed repeated drawing.

lineTo(x: number, y: number): Path

Adds line from last point to (x, y). If Path is empty, or last path is closed, last point is set to (0, 0) before adding line. Returns the modified path for easier chaining.

makeAsWinding(): Path | null

Returns a new path that covers the same area as the original path, but with the Winding FillType. This may re-draw some contours in the path as counter-clockwise instead of clockwise to achieve that effect. If such a transformation cannot be done, null is returned.

moveTo(x: number, y: number): Path

Adds beginning of contour at the given point. Returns the modified path for easier chaining.

offset(dx: number, dy: number): Path

Translates all the points in the path by dx, dy. Returns the modified path for easier chaining.

op(other: Path, op: PathOp): boolean

Combines this path with the other path using the given PathOp. Returns false if the operation fails.

quadTo(
x1: number,
y1: number,
x2: number,
y2: number,
): Path

Adds quad from last point towards (x1, y1), to (x2, y2). If Path is empty, or path is closed, last point is set to (0, 0) before adding quad. Returns the modified path for easier chaining.

rArcTo(
rx: number,
ry: number,
xAxisRotate: AngleInDegrees,
useSmallArc: boolean,
isCCW: boolean,
dx: number,
dy: number,
): Path

Relative version of arcToRotated.

rConicTo(
dx1: number,
dy1: number,
dx2: number,
dy2: number,
w: number,
): Path

Relative version of conicTo.

rCubicTo(
cpx1: number,
cpy1: number,
cpx2: number,
cpy2: number,
x: number,
y: number,
): Path

Relative version of cubicTo.

reset(): void

Sets Path to its initial state. Removes verb array, point array, and weights, and sets FillType to Winding. Internal storage associated with Path is released

rewind(): void

Sets Path to its initial state. Removes verb array, point array, and weights, and sets FillType to Winding. Internal storage associated with Path is not released. Use rewind() instead of reset() if Path storage will be reused and performance is critical.

rLineTo(x: number, y: number): Path

Relative version of lineTo.

rMoveTo(x: number, y: number): Path

Relative version of moveTo.

rQuadTo(
x1: number,
y1: number,
x2: number,
y2: number,
): Path

Relative version of quadTo.

setFillType(fill: FillType): void

Sets FillType, the rule used to fill Path.

setIsVolatile(volatile: boolean): void

Specifies whether Path is volatile; whether it will be altered or discarded by the caller after it is drawn. Path by default have volatile set false.

Mark animating or temporary paths as volatile to improve performance. Mark unchanging Path non-volatile to improve repeated rendering.

simplify(): boolean

Set this path to a set of non-overlapping contours that describe the same area as the original path. The curve order is reduced where possible so that cubics may be turned into quadratics, and quadratics maybe turned into lines.

Returns true if operation was able to produce a result.

stroke(opts?: StrokeOpts): Path | null

Turns this path into the filled equivalent of the stroked path. Returns null if the operation fails (e.g. the path is a hairline).

toCmds(): Float32Array

Serializes the contents of this path as a series of commands. The first item will be a verb, followed by any number of arguments needed. Then it will be followed by another verb, more arguments and so on.

toSVGString(): string

Returns this path as an SVG string.

transform(...args: any[]): Path

Takes a 3x3 matrix as either an array or as 9 individual params.

trim(
startT: number,
stopT: number,
isComplement: boolean,
): Path | null

Take start and stop "t" values (values between 0...1), and modify this path such that it is a subset of the original path. The trim values apply to the entire path, so if it contains several contours, all of them are including in the calculation. Null is returned if either input value is NaN.