Path2D
Declares a path that can then be used on a CanvasRenderingContext2D object.
The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you
the convenience of being able to retain and replay your path whenever desired.
Backed by a native Skia SkPath (built in user space); the canvas transform
is applied when the path is used via ctx.fill() / stroke() / clip() /
isPointInPath(). The method implementations live in the native layer
(source/path2d.cc); the bodies below are stub() placeholders that the
native path2dInitClass overwrites on the prototype — they exist only to
carry the TypeScript types and the TSDoc.
See
https://developer.mozilla.org/docs/Web/API/Path2D
Implements
Constructors
new Path2D()
new Path2D(path?): Path2D
Parameters
| Parameter | Type |
|---|---|
path? | string | Path2D |
Returns
Methods
addPath()
addPath(path, transform?): void
Adds to the path the path given by the argument, optionally transformed
by transform.
Parameters
| Parameter | Type |
|---|---|
path | Path2D |
transform? | DOMMatrix2DInit |
Returns
void
Implementation of
globalThis.Path2D.addPath
See
https://developer.mozilla.org/docs/Web/API/Path2D/addPath
arc()
arc(x, y, radius, startAngle, endAngle, counterclockwise?): void
Adds a circular arc to the current sub-path.
Parameters
| Parameter | Type |
|---|---|
x | number |
y | number |
radius | number |
startAngle | number |
endAngle | number |
counterclockwise? | boolean |
Returns
void
Implementation of
globalThis.Path2D.arc
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arc
arcTo()
arcTo(x1, y1, x2, y2, radius): void
Adds a circular arc to the current sub-path, using the given control points and radius.
Parameters
| Parameter | Type |
|---|---|
x1 | number |
y1 | number |
x2 | number |
y2 | number |
radius | number |
Returns
void
Implementation of
globalThis.Path2D.arcTo
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arcTo
bezierCurveTo()
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void
Adds a cubic Bézier curve to the current sub-path.
Parameters
| Parameter | Type |
|---|---|
cp1x | number |
cp1y | number |
cp2x | number |
cp2y | number |
x | number |
y | number |
Returns
void
Implementation of
globalThis.Path2D.bezierCurveTo
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo
closePath()
closePath(): void
Causes the point of the pen to move back to the start of the current sub-path.
Returns
void
Implementation of
globalThis.Path2D.closePath
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath
ellipse()
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void
Adds an elliptical arc to the current sub-path.
Parameters
| Parameter | Type |
|---|---|
x | number |
y | number |
radiusX | number |
radiusY | number |
rotation | number |
startAngle | number |
endAngle | number |
counterclockwise? | boolean |
Returns
void
Implementation of
globalThis.Path2D.ellipse
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/ellipse
lineTo()
lineTo(x, y): void
Connects the last point in the current sub-path to the (x, y)
coordinates with a straight line.
Parameters
| Parameter | Type |
|---|---|
x | number |
y | number |
Returns
void
Implementation of
globalThis.Path2D.lineTo
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo
moveTo()
moveTo(x, y): void
Moves the starting point of a new sub-path to the (x, y) coordinates.
Parameters
| Parameter | Type |
|---|---|
x | number |
y | number |
Returns
void
Implementation of
globalThis.Path2D.moveTo
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo
quadraticCurveTo()
quadraticCurveTo(cpx, cpy, x, y): void
Adds a quadratic Bézier curve to the current sub-path.
Parameters
| Parameter | Type |
|---|---|
cpx | number |
cpy | number |
x | number |
y | number |
Returns
void
Implementation of
globalThis.Path2D.quadraticCurveTo
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo
rect()
rect(x, y, w, h): void
Adds a rectangle to the current path.
Parameters
| Parameter | Type |
|---|---|
x | number |
y | number |
w | number |
h | number |
Returns
void
Implementation of
globalThis.Path2D.rect
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rect
roundRect()
roundRect(x, y, w, h, radii?): void
Adds a rounded rectangle to the current path.
Parameters
| Parameter | Type |
|---|---|
x | number |
y | number |
w | number |
h | number |
radii? | number | DOMPointInit | (number | DOMPointInit)[] |
Returns
void
Implementation of
globalThis.Path2D.roundRect
See
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect