Preparing search index...

    Class Path2D

    A simplified Path2D implementation, used internally by both the WebGL and Canvas renderers to build and interpolate 2D paths from SVG commands or direct method calls.

    This implementation supports a single continuous path (sub-path). SVG strings containing multiple M (moveTo) commands will be treated as one continuous path rather than separate sub-paths, which may produce unexpected fill results for shapes with holes or disconnected regions. For complex multi-part shapes, draw each sub-path separately.

    Supported SVG commands: M, L, H, V, Q, C, A, Z (uppercase only).

    Index

    Constructors

    constructor

    Properties

    arcResolution isDirty points startPoint vertices

    Methods

    arc arcTo beginPath bezierCurveTo closePath ellipse lineTo moveTo parseSVGPath quadraticCurveTo rect roundRect triangulatePath

    Constructors

    Properties

    arcResolution: number

    space between interpolated points for quadratic and bezier curve approx. in pixels.

    2
    isDirty: boolean
    points: Point[]

    the points defining the current path

    startPoint: Point
    vertices: any[]

    Methods

    • adds an arc to the current path which is centered at (x, y) position with the given radius, starting at startAngle and ending at endAngle going in the given direction by counterclockwise (defaulting to clockwise).

      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.

      • Optionalanticlockwise: boolean = false

        an optional boolean value. If true, draws the arc counter-clockwise between the start and end angles.

      Returns void

    • adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.

      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 positive.

      Returns void

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

      Parameters

      • cp1X: number

        The x-coordinate of the first control point.

      • cp1Y: number

        The y-coordinate of the first control point.

      • cp2X: number

        The x-coordinate of the second control point.

      • cp2Y: number

        The y-coordinate of the second control point.

      • x: number

        The x-coordinate of the end point of the curve.

      • y: number

        The y-coordinate of the end point of the curve.

      Returns void

    • causes the point of the pen to move back to the start of the current 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

    • adds an elliptical arc to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction 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 angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.

      • endAngle: number

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

      • Optionalanticlockwise: boolean = false

        an optional boolean value which, if true, draws the ellipse counterclockwise (anticlockwise).

      Returns void

    • connects the last point in the current path to the (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 the current 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

    • Parses an SVG path string and generates interpolated points for rendering. Clears any existing path data before parsing (calls beginPath internally).

      Supported commands:

      • M x y — move to (sets the starting point)
      • L x y — line to
      • H dx — horizontal line (relative offset from current x)
      • V dy — vertical line (relative offset from current y)
      • Q cx cy x y — quadratic Bézier curve
      • C cx1 cy1 cx2 cy2 x y — cubic Bézier curve
      • A rx ry xRot largeArc sweep x y — elliptical arc
      • Z — close path (line back to the starting M point)

      After parsing, the generated points are available in points and can be rendered using the renderer's stroke() and fill() methods.

      Parameters

      • svgPath: string

        An SVG path data string (e.g. "M 0 0 L 100 0 L 50 100 Z"). Only uppercase (absolute) commands are supported. The path must be a single continuous shape — multiple M commands within one string are not treated as separate sub-paths and may produce incorrect fill results.

      Returns void

      // draw a heart shape
      renderer.path2D.parseSVGPath(
        "M 10 30 A 20 20 0 0 1 50 30 A 20 20 0 0 1 90 30 Q 90 60 50 90 Q 10 60 10 30 Z"
      );
      renderer.setColor("#EF5350");
      renderer.fill();

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

      Parameters

      • cpX: number

        The x-coordinate of the control point.

      • cpY: number

        The y-coordinate of the control point.

      • x: number

        The x-coordinate of the end point of the curve.

      • y: number

        The y-coordinate of the end point of the curve.

      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 an rounded rectangle to the current path.

      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.

      • radius: number

        the arc's radius to draw the borders. Must be positive.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods