Documentation / @ripl/canvas / CanvasPath

Class: CanvasPath

Defined in: canvas/src/path.ts:11

Canvas-specific path implementation backed by a native Path2D object.

Extends

• ContextPath

Constructors

Constructor

new CanvasPath(id?): CanvasPath

Defined in: canvas/src/path.ts:16

Parameters

Parameter	Type
id?	string

Returns

CanvasPath

Overrides

ContextPath.constructor

Properties

Property	Modifier	Type	Description	Inherited from	Defined in
id	readonly	string	Unique identifier for this path, used for SVG element diffing between frames.	ContextPath.id	core/src/context/path.ts:20
ref	readonly	Path2D	The underlying native Path2D object accumulating this path's drawing commands.	-	canvas/src/path.ts:14

Methods

addPath()

addPath(path): void

Defined in: canvas/src/path.ts:77

Appends another path's commands to this path.

Parameters

Parameter	Type
path	ContextPath

Returns

void

Overrides

ContextPath.addPath

---

arc()

arc(x, y, radius, startAngle, endAngle, counterclockwise?): void

Defined in: canvas/src/path.ts:22

Adds an arc centered at (x, y) with the given radius to the path.

Parameters

Parameter	Type
x	number
y	number
radius	number
startAngle	number
endAngle	number
counterclockwise?	boolean

Returns

void

Overrides

ContextPath.arc

---

arcTo()

arcTo(x1, y1, x2, y2, radius): void

Defined in: canvas/src/path.ts:27

Adds an arc connecting two tangents defined by the given points to the path.

Parameters

Parameter	Type
x1	number
y1	number
x2	number
y2	number
radius	number

Returns

void

Overrides

ContextPath.arcTo

---

bezierCurveTo()

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void

Defined in: canvas/src/path.ts:37

Adds a cubic Bézier curve to the path.

Parameters

Parameter	Type
cp1x	number
cp1y	number
cp2x	number
cp2y	number
x	number
y	number

Returns

void

Overrides

ContextPath.bezierCurveTo

---

circle()

circle(x, y, radius): void

Defined in: canvas/src/path.ts:32

Adds a full circle centered at (x, y) to the path.

Parameters

Parameter	Type
x	number
y	number
radius	number

Returns

void

Overrides

ContextPath.circle

---

closePath()

closePath(): void

Defined in: canvas/src/path.ts:42

Closes the current sub-path with a straight line back to its start.

Returns

void

Overrides

ContextPath.closePath

---

ellipse()

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void

Defined in: canvas/src/path.ts:47

Adds an elliptical arc centered at (x, y) to the path.

Parameters

Parameter	Type
x	number
y	number
radiusX	number
radiusY	number
rotation	number
startAngle	number
endAngle	number
counterclockwise?	boolean

Returns

void

Overrides

ContextPath.ellipse

---

lineTo()

lineTo(x, y): void

Defined in: canvas/src/path.ts:52

Adds a straight line from the current point to (x, y).

Parameters

Parameter	Type
x	number
y	number

Returns

void

Overrides

ContextPath.lineTo

---

moveTo()

moveTo(x, y): void

Defined in: canvas/src/path.ts:57

Moves the current point to (x, y) without adding a line.

Parameters

Parameter	Type
x	number
y	number

Returns

void

Overrides

ContextPath.moveTo

---

polyline()

polyline(points): void

Defined in: core/src/context/path.ts:82

Adds a connected series of straight line segments through the given points.

Parameters

Parameter	Type
points	Point[]

Returns

void

Inherited from

ContextPath.polyline

---

quadraticCurveTo()

quadraticCurveTo(cpx, cpy, x, y): void

Defined in: canvas/src/path.ts:62

Adds a quadratic Bézier curve to the path.

Parameters

Parameter	Type
cpx	number
cpy	number
x	number
y	number

Returns

void

Overrides

ContextPath.quadraticCurveTo

---

rect()

rect(x, y, width, height): void

Defined in: canvas/src/path.ts:67

Adds a rectangle to the path.

Parameters

Parameter	Type
x	number
y	number
width	number
height	number

Returns

void

Overrides

ContextPath.rect

---

roundRect()

roundRect(x, y, width, height, radii?): void

Defined in: canvas/src/path.ts:72

Adds a rounded rectangle to the path, using the given corner radii.

Parameters

Parameter	Type
x	number
y	number
width	number
height	number
radii?	BorderRadius

Returns

void

Overrides

ContextPath.roundRect