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- A
DOMMatrix
to be used as the transformation matrix for the path that is added. (Technically aDOMMatrixInit
object).
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 StandardThe definition of 'Path2D.addPath()' in that specification. | Living Standard | Initial defintion. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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 also
- The interface defining this method:
Path2D
Path2D.addPath() by Mozilla Contributors is licensed under CC-BY-SA 2.5.