Path2D: Path2D() constructor

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. First, path1 is a rectangular path. Then, we copy path1 into path2 and add a circle to it. Finally, we stroke path2, which contains both the rectangle and the circle. Note that path1 remains unchanged, although we never draw it to the canvas. Its only purpose is to show how you can build up a complex path by building on existing paths.

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const path1 = new Path2D();
path1.rect(10, 10, 100, 100);

const 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");

const p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);

Specifications

Browser compatibility

See also

• Path2D, the interface this constructor belongs to