Interface Path2D
interface Path2D {
addPath(path: Path2D, transform?: DOMMatrix2DInit): void;
arc(
x: number,
y: number,
radius: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
bezierCurveTo(
cp1x: number,
cp1y: number,
cp2x: number,
cp2y: number,
x: number,
y: number,
): void;
closePath(): void;
ellipse(
x: number,
y: number,
radiusX: number,
radiusY: number,
rotation: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
lineTo(x: number, y: number): void;
moveTo(x: number, y: number): void;
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
rect(x: number, y: number, w: number, h: number): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | Iterable<number | DOMPointInit>,
): void;
}
addPath(path: Path2D, transform?: DOMMatrix2DInit): void;
arc(
x: number,
y: number,
radius: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
bezierCurveTo(
cp1x: number,
cp1y: number,
cp2x: number,
cp2y: number,
x: number,
y: number,
): void;
closePath(): void;
ellipse(
x: number,
y: number,
radiusX: number,
radiusY: number,
rotation: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void;
lineTo(x: number, y: number): void;
moveTo(x: number, y: number): void;
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
rect(x: number, y: number, w: number, h: number): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void;
roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | Iterable<number | DOMPointInit>,
): void;
}
Hierarchy
- CanvasPath
- Path2D (View Summary)
Methods
addPath
- addPath(path: Path2D, transform?: DOMMatrix2DInit): void
Adds to the path the path given by the argument.
Parameters
- path: Path2D
Optionaltransform: DOMMatrix2DInit
Returns void
arc
arcTo
bezierCurveTo
closePath
ellipse
- ellipse(
x: number,
y: number,
radiusX: number,
radiusY: number,
rotation: number,
startAngle: number,
endAngle: number,
counterclockwise?: boolean,
): void Parameters
- x: number
- y: number
- radiusX: number
- radiusY: number
- rotation: number
- startAngle: number
- endAngle: number
Optionalcounterclockwise: boolean
Returns void
lineTo
moveTo
quadraticCurveTo
rect
roundRect
- roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void Parameters
- x: number
- y: number
- w: number
- h: number
Optionalradii: number | DOMPointInit | (number | DOMPointInit)[]
Returns void
- roundRect(
x: number,
y: number,
w: number,
h: number,
radii?: number | DOMPointInit | Iterable<number | DOMPointInit>,
): void Parameters
- x: number
- y: number
- w: number
- h: number
Optionalradii: number | DOMPointInit | Iterable<number | DOMPointInit>
Returns void
This Canvas 2D API interface 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