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

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Chrome Full support YesEdge ? Firefox Full support 34IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 34Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

  • The interface defining it, Path2D.

Document Tags and Contributors

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