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.

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;
}

Hierarchy

  • CanvasPath
    • Path2D

Methods

addPath arc arcTo bezierCurveTo closePath ellipse lineTo moveTo quadraticCurveTo rect roundRect

Methods

addPath

  • addPath(path, transform?): void

  • Adds to the path the path given by the argument.

    Parameters

    Returns void

arc

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

  • Parameters

    • x: number
    • y: number
    • radius: number
    • startAngle: number
    • endAngle: number
    • Optionalcounterclockwise: boolean

    Returns void

arcTo

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

  • Parameters

    • x1: number
    • y1: number
    • x2: number
    • y2: number
    • radius: number

    Returns void

bezierCurveTo

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

  • Parameters

    • cp1x: number
    • cp1y: number
    • cp2x: number
    • cp2y: number
    • x: number
    • y: number

    Returns void

closePath

  • closePath(): void

  • Returns void

ellipse

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

  • Parameters

    • x: number
    • y: number
    • radiusX: number
    • radiusY: number
    • rotation: number
    • startAngle: number
    • endAngle: number
    • Optionalcounterclockwise: boolean

    Returns void

lineTo

  • lineTo(x, y): void

  • Parameters

    • x: number
    • y: number

    Returns void

moveTo

  • moveTo(x, y): void

  • Parameters

    • x: number
    • y: number

    Returns void

quadraticCurveTo

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

  • Parameters

    • cpx: number
    • cpy: number
    • x: number
    • y: number

    Returns void

rect

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

  • Parameters

    • x: number
    • y: number
    • w: number
    • h: number

    Returns void

roundRect

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

  • Parameters

    Returns void

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

  • Parameters

    Returns void

Settings

Member Visibility

On This Page

Methods