Path2D: Path2D() constructor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.
Note: This feature is available in Web Workers.
The Path2D() constructor returns a newly instantiated
Path2D object, optionally with another path as an argument (creates a
copy), or optionally with a string consisting of SVG path data.
Syntax
new Path2D()
new Path2D(path)
new Path2D(d)
Parameters
pathOptional-
When invoked with another
Path2Dobject, a copy of thepathargument is created. dOptional-
When invoked with a string consisting of SVG path data, a new path is created from that description.
Examples
Creating and copying paths
This example creates and copies a Path2D path.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let path1 = new Path2D();
path1.rect(10, 10, 100, 100);
let path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke(path2);
Using SVG paths
This example creates a Path2D path using SVG path data. The path will move to
point (M10 10) and then move horizontally 80 points to the right
(h 80), then 80 points down (v 80), then 80 points to the left
(h -80), and then back to the start (Z).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
Specifications
| Specification |
|---|
| HTML # dom-path2d-dev |
Browser compatibility
Loading…
See also
Path2D, the interface this constructor belongs to