Skip to content


A path describes a shape.

Shapes can be descriped using a path. Use an instance of Path to create complex shapes that can be drawn to a DrawContext.

-new Path

Constructs a path.

Use the methods on the path to create complex shapes.

new Path()


Moves to a point.

Moves to a point without drawing a line between the current point and the new point.

move(point: Point)


Adds a line to a point.

Add a line from the current point, e.g. set using the move method, and to the new point.

addLine(point: Point)


Adds a rectangle.

This is a convenience function for adding a rectangle to the path starting from the lower left corner and drawing the lines counter-clockwise until the rectangle is closed.

addRect(rect: Rect)


Adds an ellipse.

Adds an ellipse incapsulated by the provided rectangle to the path.

addEllipse(rect: Rect)


Adds a rounded rectangle.

Adds a rounded rectangle to the path. The corner width specifies the horizontal size of the corner and the corner height specifies the the vertical size of the corner.

addRoundedRect(rect: Rect, cornerWidth: number, cornerHeight: number)


Adds a cubic curve to a point.

Adds a cubic Bézier curve to the path with the specified end point and control points.

addCurve(point: Point, control1: Point, control2: Point)


Adds a quadratic curve to a point.

Adds a quadratic Bézier curve to the specified end point with the specified control point.

addQuadCurve(point: Point, control: Point)


Adds a set of lines.

Adds straight lines between an array of points. Calling this method is equivalent to calling the move function with the first point in the array of points and then calling addLine on the subsequent points in the array.

addLines(points: [Point])


Adds a set of rectangles.

Calling this is equivalent to repeatedly calling addRect.

addRects(rects: [Rect])


Closes a sub path.

Adds a straight line from the current point to the start of the current subpath.