Path2D

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

See also the Path2D documentation at MDN.

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.

path.addPath()(Path2D) => void

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

See also addPath at MDN.

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.

See also arc at MDN.

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.

See also arcTo at MDN.

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.

See also bezierCurveTo at MDN.

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.

See also closePath at MDN.

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.

See also ellipse at MDN.

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.

See also lineTo at MDN.

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.

See also moveTo at MDN.

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

Adds a quadratic Bézier curve to the current path.

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.

See also quadraticCurveTo at MDN.

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

Adds a rectangle to the current path.

x number The horizontal coordinate of the rectangle’s starting point.
y number The vertical coordinate of the rectangle’s starting point.
w number The width of the rectangle.
h number The height of the rectangle.

See also rect at MDN.