Path2D
class Path2D
a simplified path2d implementation, supporting only one path
Summary
Properties from Path2D
number 

Array<Point> 

Methods from Path2D
Public Properties
arcResolution: number = 5
number
space between interpolated points for quadratic and bezier curve approx. in pixels.
Public Methods
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean) → {}
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).
Name  Type  Attributes  Default  Description 

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

endAngle  number 
the angle at which the arc ends in radians, measured from the positive xaxis. 

anticlockwise  boolean 
<optional> 
false 
an optional boolean value. If true, draws the arc counterclockwise between the start and end angles. 
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number) → {}
adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.
Name  Type  Description 

x1  number 
the xaxis coordinate of the first control point. 
y1  number 
the yaxis coordinate of the first control point. 
x2  number 
the xaxis coordinate of the second control point. 
y2  number 
the yaxis coordinate of the second control point. 
radius  number 
the arc's radius. Must be positive. 
closePath() → {}
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.
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean) → {}
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.
Name  Type  Attributes  Default  Description 

x  number 
the xaxis (horizontal) coordinate of the ellipse's center. 

y  number 
the yaxis (vertical) coordinate of the ellipse's center. 

radiusX  number 
the ellipse's majoraxis radius. Must be nonnegative. 

radiusY  number 
the ellipse's minoraxis radius. Must be nonnegative. 

rotation  number 
the rotation of the ellipse, expressed in radians. 

startAngle  number 
the angle at which the ellipse starts, measured clockwise from the positive xaxis and expressed in radians. 

endAngle  number 
the angle at which the ellipse ends, measured clockwise from the positive xaxis and expressed in radians. 

anticlockwise  boolean 
<optional> 
false 
an optional boolean value which, if true, draws the ellipse counterclockwise (anticlockwise). 
lineTo(x: number, y: number) → {}
connects the last point in the current path to the (x, y) coordinates with a straight line.
Name  Type  Description 

x  number 
the xaxis coordinate of the line's end point. 
y  number 
the yaxis coordinate of the line's end point. 
moveTo(x: number, y: number) → {}
moves the starting point of the current path to the (x, y) coordinates.
Name  Type  Description 

x  number 
the xaxis (horizontal) coordinate of the point. 
y  number 
the yaxis (vertical) coordinate of the point. 
rect(x: number, y: number, width: number, height: number) → {}
creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
Name  Type  Description 

x  number 
the xaxis coordinate of the rectangle's starting point. 
y  number 
the yaxis 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. 
roundRect(x: number, y: number, width: number, height: number, radius: number) → {}
adds an rounded rectangle to the current path.
Name  Type  Description 

x  number 
the xaxis coordinate of the rectangle's starting point. 
y  number 
the yaxis 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. 
triangulatePath() → {Array<Point>}
triangulate the shape defined by this path into an array of triangles
Type  Description 

Array<Point> 
an array of vertices representing the triangulated path or shape 