MDN’s new design is in Beta! A sneak peek:

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
WHATWG HTML Living Standard
The definition of 'Path2D.addPath()' in that specification.
Living Standard Initial defintion.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 34 (34) No support (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 34.0 (34) No support (Yes) (Yes)

See also

  • The interface defining it, Path2D.

Document Tags and Contributors

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