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, transform?): void;
    arc(x, y, radius, startAngle, endAngle, counterclockwise?): void;
    arcTo(x1, y1, x2, y2, radius): void;
    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void;
    closePath(): void;
    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void;
    lineTo(x, y): void;
    moveTo(x, y): void;
    quadraticCurveTo(cpx, cpy, x, y): void;
    rect(x, y, w, h): void;
    roundRect(x, y, w, h, radii?): void;
}

Hierarchy (view full)

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
    • Optional counterclockwise: 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

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
    • Optional counterclockwise: 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

Settings

Member Visibility

Theme

On This Page

addPatharcarcTobezierCurveToclosePathellipselineTomoveToquadraticCurveTorectroundRect