Path2D

class Path2D

a simplified path2d implementation, supporting only one path

Summary

Properties from Path2D

number

arcResolution = 5

Array<Point>

points

Methods from Path2D

	arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean)
	arcTo(x1: number, y1: number, x2: number, y2: number, radius: number)
	beginPath() begin a new path
	bezierCurveTo(cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, x: number, y: number)
	closePath()
	ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean)
	lineTo(x: number, y: number)
	moveTo(x: number, y: number)
	parseSVGPath(svgPath: string)
	quadraticCurveTo(cpX: number, cpY: number, x: number, y: number)
	rect(x: number, y: number, width: number, height: number)
	roundRect(x: number, y: number, width: number, height: number, radius: number)
Array<Point>	triangulatePath()

Public Properties

arcResolution path2d.js:17

arcResolution: number = 5

number

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

points path2d.js:11

points: Array<Point>

Array<Point>

the points defining the current path

Public Methods

arc path2d.js:197

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

Parameters:
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 x-axis.
endAngle	number			the angle at which the arc ends in radians, measured from the positive x-axis.
anticlockwise	boolean	<optional>	false	an optional boolean value. If true, draws the arc counter-clockwise between the start and end angles.

arcTo path2d.js:250

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.

Parameters:
Name	Type	Description
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.

beginPath path2d.js:101

beginPath() → {}

begin a new path

bezierCurveTo path2d.js:384

bezierCurveTo(cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, x: number, y: number) → {}

Adds a cubic Bézier curve to the path.

Parameters:
Name	Type	Description
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.

closePath path2d.js:114

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 path2d.js:297

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.

Parameters:
Name	Type	Attributes	Default	Description
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.
anticlockwise	boolean	<optional>	false	an optional boolean value which, if true, draws the ellipse counterclockwise (anticlockwise).

lineTo path2d.js:174

lineTo(x: number, y: number) → {}

connects the last point in the current path to the (x, y) coordinates with a straight line.

Parameters:
Name	Type	Description
x	number	the x-axis coordinate of the line's end point.
y	number	the y-axis coordinate of the line's end point.

moveTo path2d.js:164

moveTo(x: number, y: number) → {}

moves the starting point of the current path to the (x, y) coordinates.

Parameters:
Name	Type	Description
x	number	the x-axis (horizontal) coordinate of the point.
y	number	the y-axis (vertical) coordinate of the point.

parseSVGPath path2d.js:38

parseSVGPath(svgPath: string) → {}

Parses an SVG path string and adds the points to the current path.

Parameters:
Name	Type	Description
svgPath	string	The SVG path string to parse.

quadraticCurveTo path2d.js:358

quadraticCurveTo(cpX: number, cpY: number, x: number, y: number) → {}

Adds a quadratic Bézier curve to the path.

Parameters:
Name	Type	Description
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.

rect path2d.js:414

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.

Parameters:
Name	Type	Description
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.

roundRect path2d.js:437

roundRect(x: number, y: number, width: number, height: number, radius: number) → {}

adds an rounded rectangle to the current path.

Parameters:
Name	Type	Description
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.

triangulatePath path2d.js:130

triangulatePath() → {Array<Point>}

triangulate the shape defined by this path into an array of triangles

Returns:
Type	Description
Array<Point>	an array of vertices representing the triangulated path or shape