"DOM Exception 18" from canvas

Question

I'm taking an SVG image, drawing it onto a canvas, and trying to export it via toDataURL, but Chrome is throwing me that DOM Exception 18 security error. I know the problem is because I drew the SVG image onto the canvas with a data URI scheme (data:image/svg+xml;base64), so I guess the browser sees it as cross-domain (i.e., a security problem), but I can't think of any other way to get my SVG stuff onto the canvas. I can't host it because the SVG contents are dynamic and manipulated first before needing to be exported via toDataURL.

I read through some of the other similar questions asked on here but couldn't find any solutions for my problem.

Answer 1

In Chrome drawing any SVG on to a canvas taints it because the SVG might contain a foreignObject, here is the bug. Chrome also has issues with data URI schemes and canvas, so you're running into a double whammy.