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 Standard The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
addPath | 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