ReadonlyboundsThe smallest rectangle containing the path.
Does not account for lineWidth, so a stroked path covers more than this.
A browser Path2D is an opaque recorder of drawing commands with no way
to measure it.
🧪 Not in the HTML Canvas standard.
The path as SVG path data. Readable, writable, and appendable with +=.
🧪 Not in the HTML Canvas standard.
ReadonlyedgesEvery segment added so far, as ["verb", ...points] entries.
The verbs and their arguments match the method names, so the list can be replayed onto another path or onto a context.
🧪 Not in the HTML Canvas standard.
Adds the path given by the argument to the path
Optionaltransform: DOMMatrix2DInitCurve to (x, y), pulled toward the control point.
weight sets how close the curve comes: 0 draws a straight line, 1
matches quadraticCurveTo, and larger values pull it nearer the control
point.
🧪 Not in the HTML Canvas standard.
Whether the point is inside the path or on one of its contours.
🧪 Not in the HTML Canvas standard.
Optionalcounterclockwise: booleanA copy broken into segments of segmentLength with each point displaced
at random by up to amount.
The displacement is random but reproducible: the same seed gives the
same path every run.
🧪 Not in the HTML Canvas standard.
Optionalseed: numberA copy shifted by dx horizontally and dy vertically.
🧪 Not in the HTML Canvas standard.
The positions along the path at every step pixels, 1 by default.
🧪 Not in the HTML Canvas standard.
Optionalstep: numberA copy with its corners rounded off to radius.
🧪 Not in the HTML Canvas standard.
Optionalradii: number | DOMPointInit | (number | DOMPointInit)[]A copy with overlapping segments within the path removed, as though the path had been unioned with itself.
"evenodd" keeps the overlap regions as holes while still removing the
edge crossings.
🧪 Not in the HTML Canvas standard.
Optionalrule: "evenodd" | "nonzero"As above, with the six components of a 2D matrix given directly, in the
order a, b, c, d, e, f.
🧪 Not in the HTML Canvas standard.
The portion of the path between two points along its contour, each given
as a fraction from 0 to 1.
inverted takes everything except that span instead. With one number,
a positive value trims from the start and a negative one trims to the
end.
🧪 Not in the HTML Canvas standard.
Optionalinverted: booleanAs above, with one end named instead of two: a positive start trims
from the beginning of the contour, a negative one trims back from its
end.
🧪 Not in the HTML Canvas standard.
Optionalinverted: booleanA copy that covers the same area under the "nonzero" rule as this path
does under "evenodd".
Useful when one path holds several overlapping contours, where the filled shape otherwise depends on their nesting and direction.
🧪 Not in the HTML Canvas standard.
This Canvas 2D API interface is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.
MDN Reference