This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 the path 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 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);

Specification

Specification Status Comment
HTML Living Standard
The definition of 'Path2D()' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 31IE ? Opera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 31Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
Path2D() constructor
Experimental
Chrome Full support YesEdge Full support Yes
Notes
Full support Yes
Notes
Notes The constructor for Path2D objects in Edge does not support being invoked with a string consisting of SVG path data. See issue 8438884 for details.
Firefox Full support 31IE ? Opera Full support YesSafari Full support 10WebView Android No support NoChrome Android Full support 42Edge Mobile ? Firefox Android Full support 31Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 4.0
addPath
Experimental
Chrome Full support YesEdge ? Firefox Full support 34IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 34Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also

  • Path2D, the interface this constructor belongs to

Document Tags and Contributors

Contributors to this page: mfluehr, sideshowbarker, fscholz, Kaiido, SphinxKnight, dlli, nmve, Sheppy
Last updated by: mfluehr,