The Path2D.addPath()
method of the Canvas 2D API adds one Path2D
object to another Path2D
object.
The Path2D.addPath()
method of the Canvas 2D API adds one Path2D
object to another Path2D
object.
js
addPath(path) addPath(path, transform)
None (undefined
).
This example adds one path to another.
html
<canvas id="canvas"></canvas>
First, we create two separate Path2D
objects, each of which contains a rectangle made using the rect()
method. We then create a matrix using DOMMatrix()
. 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()
.
js
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 = new DOMMatrix(); 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);
Specification |
---|
HTML Standard # dom-path2d-addpath-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
addPath |
68 | 79 | 34 | No | 55 | 9 | 68 | 68 | 34 | 48 | 9 | 10.0 |
Path2D
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath