# Path2D

`Path2D` objects represent paths that can be drawn into a canvas, using canvas.fill and canvas.stroke.

Path2D

Creates a new `Path2D`. The constructor has 3 variants.

The first takes no parameters and builds an empty path.

The second takes another `Path2D` instance and makes a copy.

The third takes an SVG path as a `string` parameter, and builds the corresponding path.

Adds the path of an existing `Path2D` object to this one.

path.arc()(number, number, number, number, number) => void

Adds a circular arc to the current path, centered at `(x, y)` and with the given `radius`. The path starts at `startAngle` and ends at `endAngle`, traveling in the clockwise direction.

 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. startAngle number The arc’s starting angle, in radians, measured from the x axis. endAngle number The arc’s ending angle, in radians, measured from the x axis.

path.arcTo()(number, number, number, number, number) => void

Adds a circular arc to the current path, using the given control points and radius. The arc is connected to the path’s latest point with a straight line, if necessary.

 x1 number The horizontal coordinate of the first control point. y1 number The vertical coordinate of the first control point. x2 number The horizontal coordinate of the second control point. y2 number The vertical coordinate of the second control point. radius number The arc’s radius.

path.bezierCurveTo()(number, number, number, number, number, number) => void

Adds a cubic Bézier curve to the current path. Requires three points: two control points, and a final end point. The starting point is the latest point in the current path (which can be changed using moveTo before creating the curve).

 x1 number The horizontal coordinate of the first control point. y1 number The vertical coordinate of the first control point. x2 number The horizontal coordinate of the second control point. y2 number The vertical coordinate of the second control point. x number The horizontal coordinate of the end point. y number The vertical coordinate of the end point.

path.closePath()() => void

Adds a straight line from the current point to the start of the current path. Does nothing if the shape has already been closed, or has only one point.

path.ellipse()(number, number, number, number, number, number, number) => void

Adds an elliptical arc to the current path.

 x number The horizontal coordinate of the center of the ellipse. y number The vertical coordinate of the center of the ellipse. rx number The radius of the major axis of the ellipse. ry number The radius of the minor axis of the ellipse. rotation number The rotation of the ellipse, in radians. startAngle number The angle at which the ellipse starts, in radians, measured clockwise from the positive X axis. endAngle number The angle at which the ellipse end, in radians, measured clockwise from the positive X axis.

path.lineTo()(number, number) => void

Connects the last point of the current path with a straight line to the given point.

 x number The horizontal coordinate of the end point. y number The vertical coordinate of the end point.

path.moveTo()(number, number) => void

Begins a new path at the given point.

 x number The horizontal coordinate of the point. y number The vertical coordinate of the point.

path.quadraticCurveTo()(number, number, number, number) => void

The curve requires two points. The first is a control point, and the second is the end point. The starting point is the latest point in the current path, which can be changed using moveTo before creating the quadratic Bézier curve.

 cx number The horizontal coordinate of the control point. cy number The vertical coordinate of the control point. ex number The horizontal coordinate of the end point. ey number The vertical coordinate of the end point.