Path2D()
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use 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 spec 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.
Syntax
new Path2D(); new Path2D(path); new Path2D(d);
Parameters
path
Optional- When invoked with another
Path2D
object, a copy of thepath
argument is created. d
Optional- When invoked with a string consisting of SVG path data, a new path is created from that description.
Examples
Creating and copying paths
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:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height: 150px"> 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);</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
Using SVG paths
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:
Playable code2
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); ctx.fill(p);</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
Specification
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'Path2D()' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | 31.0 (31.0) | Not supported | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 31.0 (31.0) | Not supported | ? | ? |
See also
Path2D
, the interface this constructor belongs to.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/path2d/path2d