Path2D

The Path2D interface of the Canvas 2D API is used to declare 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.

MDN Reference

Extends

• CanvasPath

Methods

addPath()

addPath(path, transform?): void;

The Path2D.addPath() method of the Canvas 2D API adds one Path2D object to another Path2D object.

MDN Reference

Parameters

Parameter	Type
path	Path2D
transform?	DOMMatrix2DInit

Returns

void

---

arc()

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

MDN Reference

Parameters

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

Returns

void

Inherited from

CanvasPath.arc

---

arcTo()

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

MDN Reference

Parameters

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

Returns

void

Inherited from

CanvasPath.arcTo

---

bezierCurveTo()

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

MDN Reference

Parameters

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

Returns

void

Inherited from

CanvasPath.bezierCurveTo

---

closePath()

closePath(): void;

MDN Reference

Returns

void

Inherited from

CanvasPath.closePath

---

ellipse()

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

MDN Reference

Parameters

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

Returns

void

Inherited from

CanvasPath.ellipse

---

lineTo()

lineTo(x, y): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number

Returns

void

Inherited from

CanvasPath.lineTo

---

moveTo()

moveTo(x, y): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number

Returns

void

Inherited from

CanvasPath.moveTo

---

quadraticCurveTo()

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

MDN Reference

Parameters

Parameter	Type
cpx	number
cpy	number
x	number
y	number

Returns

void

Inherited from

CanvasPath.quadraticCurveTo

---

rect()

rect(
   x, 
   y, 
   w, 
   h
): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number

Returns

void

Inherited from

CanvasPath.rect

---

roundRect()

Call Signature

roundRect(
   x, 
   y, 
   w, 
   h, 
   radii?
): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number
radii?	| number | DOMPointInit | (number | DOMPointInit)[]

Returns

void

Inherited from

CanvasPath.roundRect

Call Signature

roundRect(
   x, 
   y, 
   w, 
   h, 
   radii?
): void;

MDN Reference

Parameters

Parameter	Type
x	number
y	number
w	number
h	number
radii?	| number | DOMPointInit | Iterable<number | DOMPointInit, any, any>

Returns

void

Inherited from

CanvasPath.roundRect