Path2D

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨August 2016⁩.

Note: This feature is available in Web Workers.

The Path2D interface of the Canvas 2D API is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.

Constructors

Path2D(): Path2D constructor. Creates a new Path2D object.

Instance methods

Path2D.addPath(): Adds a path to the current path.
Path2D.closePath(): Causes the point of the pen to move back to the start of the current sub-path.
Path2D.moveTo(): Moves the starting point of a new sub-path to the (x, y) coordinates.
Path2D.lineTo(): Connects the last point in the subpath to the (x, y) coordinates with a straight line.
Path2D.bezierCurveTo(): Adds a cubic Bézier curve to the path.
Path2D.quadraticCurveTo(): Adds a quadratic Bézier curve to the current path.
Path2D.arc(): Adds an arc to the path.
Path2D.arcTo(): Adds a circular arc to the path.
Path2D.ellipse(): Adds an elliptical arc to the path.
Path2D.rect(): Creates a rectangular path.
Path2D.roundRect(): Creates a rounded rectangle path.

Examples

Creating and copying paths

This example demonstrates how a Path2D object can be copied and extended.

First, path1 creates a rectangle.
Then, path2 is created as a copy of path1.
After that, path2 is extended with a circle.
Finally, only path2 is drawn.

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