The Path2D interface of the Canvas 2D API is used to declare a path that can then be used on a CanvasRenderingContext2D object.

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

  • The Path2D.addPath() method of the Canvas 2D API adds one Path2D object to another Path2D object.

    MDN Reference

    Parameters

    Returns void

  • Parameters

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

    Returns void

  • Parameters

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

    Returns void

  • Parameters

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

    Returns void

  • Returns void

  • Parameters

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

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

  • Parameters

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

    Returns void

  • Parameters

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

    Returns void

  • Parameters

    Returns void

  • Parameters

    Returns void