The Path2D.addPath() method of the Canvas 2D API adds one Path2D object to another Path2D object.

Syntax

void path.addPath(path [, transform]);

Parameters

path
A Path2D path to add.
transform Optional
An SVGMatrix to be used as the transformation matrix for the path that is added.

Examples

Adding a path to an existing path

This example adds one path to another.

HTML

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

JavaScript

First, we create two separate Path2D objects, each of which contains a rectangle made using the rect() method. We then create a matrix using document.createElementNS() and createSVGMatrix(). We then add the second path to the first using addPath(), also applying the matrix to move the second path to the right. Finally, we draw the first path (which now contains both rectangles) using fill().

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

// Create first path and add a rectangle
let p1 = new Path2D();
p1.rect(0, 0, 100, 150);

// Create second path and add a rectangle
let p2 = new Path2D();
p2.rect(0, 0, 100, 75);

// Create transformation matrix that moves 200 points to the right
let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 200; m.f = 0;

// Add second path to the first path
p1.addPath(p2, m);

// Draw the first path
ctx.fill(p1);

Result

Specifications

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

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 ? 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 also

  • The interface defining this method: Path2D

Document Tags and Contributors

Contributors to this page: mfluehr, fscholz, talltyler, nmve, iegik, pioug
Last updated by: mfluehr,