The Path2D.addPath() method of the Canvas 2D API adds to the path the path given by the argument.


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


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


Using the addPath method

This is just a simple code snippet which uses the addPath method.

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

// Create a new path with a rect
var p1 = new Path2D();
p1.rect(0, 0, 100, 100);

// Create another path with a rect
var p2 = new Path2D();
p2.rect(0, 0, 100, 100);

// Create transformation matrix that moves vertically 300 points to the right
var m = document.createElementNS('', 'svg').createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 300; m.f = 0;

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

// Finally, fill the first path onto the canvas

Edit the code below and see your changes update live in the canvas (check the browser compatibilty table if your current browser actually supports this method):

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
<textarea id="code" class="playable-code" style="height:220px;">
var p1 = new Path2D();

var p2 = new Path2D();

var m = document.createElementNS("", "svg").createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 300; m.f = 0;

p1.addPath(p2, m);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

reset.addEventListener("click", function() {
  textarea.value = code;

edit.addEventListener("click", function() {

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);


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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?34 No Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes ?34 Yes Yes Yes

See also

  • The interface defining it, Path2D.

Document Tags and Contributors

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