Skip to content

Path

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.

new Path()

Use the methods on the path to create complex shapes.


-move

Moves to a point.

move(point: Point)

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

Parameters

point
Point
Point to move to.


-addLine

Adds a line to a point.

addLine(point: Point)

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

Parameters

point
Point
Point to add line to.


-addRect

Adds a rectangle.

addRect(rect: Rect)

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.

Parameters

rect
Rect
Rectangle to add.


-addEllipse

Adds an ellipse.

addEllipse(rect: Rect)

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

Parameters

rect
Rect
Rectangle incapsulating the ellipse.


-addRoundedRect

Adds a rounded rectangle.

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

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.

Parameters

rect
Rect
Rectangle to add.

cornerWidth
number
Horizontal size of the rounded corner.

cornerHeight
number
Vertical size of the rounded corner.


-addCurve

Adds a cubic curve to a point.

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

Adds a cubic Bezier curve to the path with the specified end point and control points.

Parameters

point
Point
End point of the curve.

control1
Point
First control point of the curve.

control2
Point
Second control point of the curve.


-addQuadCurve

Adds a quadratic curve to a point.

addQuadCurve(point: Point, control: Point)

Adds a quadratic Bezier curve to the specified end point with the specified control point.

Parameters

point
Point
End point of the curve.

control
Point
Control point of the curve.


-addLines

Adds a set of lines.

addLines(points: [Point])

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.

Parameters

points
[Point]
Points to add lines between.


-addRects

Adds a set of rectangles.

addRects(rects: [Rect])

Calling this is equivalent to repeatedly calling addRect.

Parameters

rects
[Rect]
Rectangles to add.


-closeSubpath

Closes a sub path.

closeSubpath()

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