This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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.
new Path2D(); new Path2D(path); new Path2D(d);
path
Optional
Path2D
object, a copy of the path
argument is created.d
Optional
This is just a simple code snippet which creates and copies Path2D
paths.
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var path1 = new Path2D(); path1.rect(10, 10, 100,100); var path2 = new Path2D(path1); path2.moveTo(220, 60); path2.arc(170, 60, 50, 0, 2 * Math.PI); ctx.stroke(path2);
Edit the code below and see your changes update live in the canvas:
This is just a simple code snippet which 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
).
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var p = new Path2D('M10 10 h 80 v 80 h -80 Z'); ctx.fill(p);
Edit the code below and see your changes update live in the canvas:
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'Path2D()' in that specification. | Living Standard | Initial definition. |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | 31.0 (31.0) | No support | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 31.0 (31.0) | No support | ? | ? |
Path2D
, the interface this constructor belongs to.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D