Canvas elements unrelated to the image conversion process are "tainted" with 2d drawing contexts

[Pointy]

Testing with 1.4.0

Bug reports:

Calling html2canvas on an element in the DOM results in unrelated <canvas> elements (everywhere in the DOM, as far as I can tell) being "contaminated" with a 2d drawing context, thus disallowing them from getting a webgl context later.

https://jsfiddle.net/Pointy/Lxkj43no/

The fiddle reproduces the problem by first attempting to get a webgl context on one <canvas> unrelated to the image conversion, and it works. Then, html2canvas() is invoked to convert an element. After that, the other unrelated <canvas> on the page cannot be used to get a webgl drawing context.

I'm not sure but I think it happens in the document cloning phase, but that's a big guess on my part.

Specifications:

• html2canvas version tested with: 1.4.0
• Browser & version: Firefox, Chrome, both very recent as of Jan 2022
• Operating system: Linux (Ubuntu), also seen on other platforms

[Pointy]

I can't tell from the documentation whether it's preventable by some configuration option, but the code that clones a <canvas> does look like it always grabs a 2d context from the source canvas. (It also tries to grab a webgl context, which as far as I know can never work.) So this may or may not be a "bug", and it's fairly easy to work around by making sure the right kinds of contexts have been obtained prior to rendering any images.

[niklasvh]

it's fairly easy to work around by making sure the right kinds of contexts have been obtained prior to rendering any images

How would it determine what context type it should be getting for a canvas found on the page?

[Pointy]

In my case, the canvas elements are always used for webgl contexts, so I just made an initialization function that finds them all, and (unless marked with a class indicating that they're not webgl) it gets a webgl context. In general, however, I agree that it's impossible for code like html2canvas to determine that. It would have to be something that a configuration option could control, which I suppose might be possible already with the facility that allows elements to be ignored via a configured predicate.

Note that aside from this "bug", the code that attempts to clone the canvas elements seems to always try to get a webgl context after successfully getting a 2d context. As far as I know, that will never work, because once a context of a particular type has been gotten for a particular canvas element, no other type can be gotten.

[niklasvh]

The logic presumes the page has gotten a context prior to html2canvas attempting to get one. So if the page is using it for 2d, html2canvas will succesfully get a 2d context, and if it was webgl, it will successfully get that instead.

At the moment there isn't any configuration options available to alter that logic