API
API|
@babylonjs/core|
IPath2D

Interface IPath2D

Class used to abstract a 2D path to use with the canvas and its context

interface IPath2D {
    addPath(path: IPath2D, transform?: DOMMatrix): 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, width: number, height: number): void;
    roundRect(
        x: number,
        y: number,
        width: number,
        height: number,
        radii: number,
    ): void;
}
Index
addPath arc arcTo bezierCurveTo closePath ellipse lineTo moveTo quadraticCurveTo rect roundRect

  • Adds a circular arc to the current path.

    Parameters

    • x: number

      The horizontal coordinate of the arc's center.

    • y: number

      The vertical coordinate of the arc's center.

    • radius: number

      The arc's radius. Must be positive.

    • startAngle: number

      The angle at which the arc starts in radians, measured from the positive x-axis.

    • endAngle: number

      The angle at which the arc ends in radians, measured from the positive x-axis.

    • Optionalcounterclockwise: boolean

      An optional Boolean. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).

    Returns void

  • Adds a circular arc to the current sub-path, using the given control points and radius.

    Parameters

    • x1: number

      The x-axis coordinate of the first control point.

    • y1: number

      The y-axis coordinate of the first control point.

    • x2: number

      The x-axis coordinate of the second control point.

    • y2: number

      The y-axis coordinate of the second control point.

    • radius: number

      The arc's radius. Must be non-negative.

    Returns void

  • Adds a cubic Bézier curve to the current path.

    Parameters

    • cp1x: number

      The x-axis coordinate of the first control point.

    • cp1y: number

      The y-axis coordinate of the first control point.

    • cp2x: number

      The x-axis coordinate of the second control point.

    • cp2y: number

      The y-axis coordinate of the second control point.

    • x: number

      The x-axis coordinate of the end point.

    • y: number

      The y-axis coordinate of the end point.

    Returns void

  • Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

    Returns void

  • Creates an elliptical arc centered at (x, y) with the radii radiusX and radiusY. The path starts at startAngle and ends at endAngle, and travels in the direction given by counterclockwise.

    Parameters

    • x: number

      The x-axis (horizontal) coordinate of the ellipse's center.

    • y: number

      The y-axis (vertical) coordinate of the ellipse's center.

    • radiusX: number

      The ellipse's major-axis radius. Must be non-negative.

    • radiusY: number

      The ellipse's minor-axis radius. Must be non-negative.

    • rotation: number

      The rotation of the ellipse, expressed in radians.

    • startAngle: number

      The eccentric angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.

    • endAngle: number

      The eccentric angle at which the ellipse ends, measured clockwise from the positive x-axis and expressed in radians.

    • Optionalcounterclockwise: boolean

      An optional boolean value which, if true, draws the ellipse counterclockwise (anticlockwise). The default value is false (clockwise).

    Returns void

  • Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.

    Parameters

    • x: number

      The x-axis coordinate of the line's end point.

    • y: number

      The y-axis coordinate of the line's end point.

    Returns void

  • Moves the starting point of a new sub-path to the (x, y) coordinates.

    Parameters

    • x: number

      The x-axis (horizontal) coordinate of the point.

    • y: number

      The y-axis (vertical) coordinate of the point.

    Returns void

  • Adds a quadratic Bézier curve to the current path.

    Parameters

    • cpx: number

      The x-axis coordinate of the control point.

    • cpy: number

      The y-axis coordinate of the control point.

    • x: number

      The x-axis coordinate of the end point.

    • y: number

      The y-axis coordinate of the end point.

    Returns void

  • Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.

    Parameters

    • x: number

      The x-axis coordinate of the rectangle's starting point.

    • y: number

      The y-axis coordinate of the rectangle's starting point.

    • width: number

      The rectangle's width. Positive values are to the right, and negative to the left.

    • height: number

      The rectangle's height. Positive values are down, and negative are up.

    Returns void

  • Adds a rounded rectangle to the current path.

    Parameters

    • x: number

      The x-axis coordinate of the rectangle's starting point, in pixels.

    • y: number

      The y-axis coordinate of the rectangle's starting point, in pixels.

    • width: number

      The rectangle's width. Positive values are to the right, and negative to the left.

    • height: number

      The rectangle's height. Positive values are down, and negative are up.

    • radii: number

      A number specifying the radii of the circular arc to be used for the corners of the rectangle. The number and order of the radii function in the same way as the border-radius CSS property when width and height are positive:

    Returns void