Interface Path2D

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

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, any, any>,
    ): void;
}

Hierarchy

CanvasPath
- Path2D

Index

Methods

addPath arc arcTo bezierCurveTo closePath ellipse lineTo moveTo quadraticCurveTo rect roundRect

Methods

addPath

addPath(path: Path2D, transform?: DOMMatrix2DInit): void
Adds to the path the path given by the argument.

MDN Reference
Parameters
- path: Path2D
- Optionaltransform: DOMMatrix2DInit
Returns void
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:17359

arc

arc(
    x: number,
    y: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean,
): void
MDN Reference
Parameters
- x: number
- y: number
- radius: number
- startAngle: number
- endAngle: number
- Optionalcounterclockwise: boolean
Returns void
Inherited from CanvasPath.arc
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5816

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
MDN Reference
Parameters
- x1: number
- y1: number
- x2: number
- y2: number
- radius: number
Returns void
Inherited from CanvasPath.arcTo
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5818

bezierCurveTo

bezierCurveTo(
    cp1x: number,
    cp1y: number,
    cp2x: number,
    cp2y: number,
    x: number,
    y: number,
): void
MDN Reference
Parameters
- cp1x: number
- cp1y: number
- cp2x: number
- cp2y: number
- x: number
- y: number
Returns void
Inherited from CanvasPath.bezierCurveTo
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5820

closePath

closePath(): void
MDN Reference

Returns void
Inherited from CanvasPath.closePath
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5822

ellipse

ellipse(
    x: number,
    y: number,
    radiusX: number,
    radiusY: number,
    rotation: number,
    startAngle: number,
    endAngle: number,
    counterclockwise?: boolean,
): void
MDN Reference
Parameters
- x: number
- y: number
- radiusX: number
- radiusY: number
- rotation: number
- startAngle: number
- endAngle: number
- Optionalcounterclockwise: boolean
Returns void
Inherited from CanvasPath.ellipse
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5824

lineTo

lineTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.lineTo
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5826

moveTo

moveTo(x: number, y: number): void
MDN Reference
Parameters
- x: number
- y: number
Returns void
Inherited from CanvasPath.moveTo
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5828

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
MDN Reference
Parameters
- cpx: number
- cpy: number
- x: number
- y: number
Returns void
Inherited from CanvasPath.quadraticCurveTo
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5830

rect

rect(x: number, y: number, w: number, h: number): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
Inherited from CanvasPath.rect
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5832

roundRect

roundRect(
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | DOMPointInit | (number | DOMPointInit)[],
): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
- Optionalradii: number | DOMPointInit | (number | DOMPointInit)[]
Returns void
Inherited from CanvasPath.roundRect
- Defined in ../node_modules/typescript/lib/lib.dom.d.ts:5834
roundRect(
    x: number,
    y: number,
    w: number,
    h: number,
    radii?: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>,
): void
MDN Reference
Parameters
- x: number
- y: number
- w: number
- h: number
- Optionalradii: number | DOMPointInit | Iterable<number | DOMPointInit, any, any>
Returns void
Inherited from CanvasPath.roundRect
- Defined in ../node_modules/typescript/lib/lib.dom.iterable.d.ts:83

Interface Path2D

Hierarchy

Index

Methods

Methods

addPath

Parameters

Returns void

arc

Parameters

Returns void

arcTo

Parameters

Returns void

bezierCurveTo

Parameters

Returns void

closePath

Returns void

ellipse

Parameters

Returns void

lineTo

Parameters

Returns void

moveTo

Parameters

Returns void

quadraticCurveTo

Parameters

Returns void

rect

Parameters

Returns void

roundRect

Parameters

Returns void

Parameters

Returns void

Settings

On This Page