The starting x-coordinate of the Path.
The starting y-coordinate of the Path.
The opacity of the entire Shape.
The Stroke object to outline the element with.
The opacity of just the Stroke.
Close the path by creating a stroke from the current end-point in the Path to the start point of the path.
Draw a cubic, bezier curve to a specific end point. For more information on how quadratic curves work and to tinker with its two control points, see this cubic curve demo.
first control point's x-coordinate
first control point's y-coordinate
second control point's x-coordinate
second control point's y-coordinate
x-coordinate of end point
y-coordinate of end point
the x-coordinate to draw a line to from the current position of the stroke
the y-coordinate to draw a line to from the current position of the stroke
the x-coordinate of the point to move the "pen" to without drawing a stroke.
the y-coordinate of the point to move the "pen" to without drawing a stroke.
Draw a quadratic curve to a specific end point. For more information on how quadratic curves work and to tinker with its control point, see this quadratic curve demo.
control point's x-coordinate
control point's y-coordinate
x-coordinate of end point
y-coordinate of end point
Generated using TypeDoc
A Path is made of a sequence of PathSegments connected by a Stroke.
The Path class has the following helper methods to add segments to a Path.
Each of these helper methods returns a reference to the same Path object it was called on. This allows you to chain these calls together. For example:
let p: Path = new Path(0, 0); p.lineTo(10, 0).moveTo(0, 0).lineTo(0, 10);By default, a Path has a fill opacity of 0% so its fill will not show up. If you would like to add a Fill color to your Path, be sure to set its fillOpacity to 1.0 for 100% fill opacity.
For more details on SVG Paths, checkout MDN's Path documentation.