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>): 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.

    MDN Reference

    Parameters

    Returns void

arc

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

  • MDN Reference

    Parameters

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

    Returns void

arcTo

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

  • MDN Reference

    Parameters

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

    Returns void

bezierCurveTo

  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): 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, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): 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, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

moveTo

  • moveTo(x, y): void

  • MDN Reference

    Parameters

    • x: number
    • y: number

    Returns void

quadraticCurveTo

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

  • MDN Reference

    Parameters

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

    Returns void

rect

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

  • MDN Reference

    Parameters

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

    Returns void

roundRect

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

  • MDN Reference

    Parameters

    Returns void

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

  • MDN Reference

    Parameters

    Returns void

Settings

Member Visibility

On This Page

Methods