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 {
    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;
    addPath(path: Path2D, transform?: DOMMatrix2DInit): void;
}

Hierarchy

CanvasPath
- Path2D

Index

Methods

<internal>.Path2D.arc <internal>.Path2D.arcTo <internal>.Path2D.bezierCurveTo <internal>.Path2D.closePath <internal>.Path2D.ellipse <internal>.Path2D.lineTo <internal>.Path2D.moveTo <internal>.Path2D.quadraticCurveTo <internal>.Path2D.rect <internal>.Path2D.roundRect <internal>.Path2D.addPath

Methods

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

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

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

closePath

closePath(): void

MDN Reference

Returns void

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

lineTo

lineTo(x: number, y: number): void

MDN Reference

Parameters

```
x: number
```
```
y: number
```

Returns void

moveTo

moveTo(x: number, y: number): void

MDN Reference

Parameters

```
x: number
```
```
y: number
```

Returns void

quadraticCurveTo

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

MDN Reference

Parameters

```
cpx: number
```
```
cpy: number
```
```
x: number
```
```
y: number
```

Returns void

rect

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

MDN Reference

Parameters

```
x: number
```
```
y: number
```
```
w: number
```
```
h: number
```

Returns void

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

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

addPath

addPath(path: Path2D, transform?: DOMMatrix2DInit): void

Adds to the path the path given by the argument.

MDN Reference

Parameters

```
path: Path2D
```
```
Optionaltransform: DOMMatrix2DInit
```