[removed] toDataUrl() throwing “Security Error: Tainted canvases may not be exported.”

Question

I have an HTML5 canvas on which I draw an image from an svg.

HTML

Answer 1

This is was for security and user privacy reasons.
To paint a on a canvas can leaks several informations about users, and until then, chrome team thought they didn't had enough security measures to prevent this so they did taint the canvas.

Here is the chromium bug report about this issue.

But as OP found out, they had an implementation bug that forgot to set this restriction on dataURI versions.
I did post this bug report about the fact that they do not taint canvas with dataURIs.

All this lead to the leverage of the former restrictions, so in next versions of chrome, we should be able to paint on canvas without tainting it, even with BlobURIs.

But note that Safari still does have the same restriction (without the implementation bug, i.e the dataURI hack doesn't work there), and that IE < Edge do not support element and taints the canvas when any SVG has been painted to it, and that FF does remove all UserAgent and OS styles (which leads to different results than the one you could expect).

A real workaround then is to not use this hack to get your elements painted, but draw all your HTML with CanvasAPI drawing methods (just like html2canvas does).