SVG clip-path attribute slows down html2canvas

[tsairinius]

I'm working on an application that involves drawing a few hundred group elements (with a few other elements nested inside each), each with their own clipPath. There's also a user feature for taking a snapshot of the SVG and downloading it as a PNG. However, there is a noticeable performance decline in taking snapshots in Firefox.

I've boiled down to the below JSFiddle example. I'm drawing a bunch of SVG shapes, each nested inside of a group element. Each group element has its clip-path attribute set to a clipPath that does not exist. It doesn't matter whether the clipPath elements exist. Either way, the slowdown occurs.

On click of a button, the color of the shapes changes, and html2canvas is called to take a snapshot of the shapes. The color change forces the SVG to change on each click. I noticed that if the SVG remains the same after multiple clicks, html2canvas is much faster. I'm guessing there's some sort of caching going on.

If you comment out the line where I set the clip-path attribute and then click the button, html2canvas will be a lot faster.

https://jsfiddle.net/mo59cawd/41

[tsairinius]

After some debugging, the slowdown seems to occur when executing ctx.drawImage in renderReplacedElement of html2canvas.js (v1.4.1). The call to renderReplacedElement is happening under case 10 of the switch statement in renderNodeContent