Path2D

class Path2D

a simplified path2d implementation, supporting only one path

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:130
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:183
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:34
beginPath() → {}

begin a new path

closePath path2d.js:47
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:228
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:107
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:97
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.

rect path2d.js:289
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:312
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:63
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


Powered by webdoc!