Web/API/Path2D/Path2D

This is an experimental technologyCheck 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.

<canvas id="canvas"></canvas>

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).

<canvas id="canvas"></canvas>

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 StandardThe definition of 'Path2D()' in that specification.	Living Standard	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`Path2D` Experimental'	Chrome Full support Yes	Edge Full support ≤18	Firefox Full support 31	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 31	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`Path2D()` constructor Experimental'	Chrome Full support Yes	Edge Full support ≤18 Notes' Full support ≤18 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 31	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android No support No	Chrome Android Full support 42	Firefox Android Full support 31	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
`addPath` Experimental'	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support 34	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 34	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.