Drawing DOM elements (SVGs as foreign elements) on a canvas doesn't work in Internet Explorer

Question

I have successfully used this technique, to draw user input from DOM elements (such as input and selection fields) on a canvas and make it available as an image.

This works fine in Chrome, Safari and Firefox, but on Internet Explorer 11 , I get the following error:

• XML5634: An attribute with the same name already exists on this element. Line: 1, Column 242 , when I try on the full site I 've developed. This error is supposedly shown when there are duplicate values on name and id fields but I checked every element on the DOM and there is none.
• Unexpected call to method or property access. , when I try to reproduce the whole procedure on this fiddle: http://jsfiddle.net/5mf4n7v3/ . It seems from the debugger that the error happens when ctx.drawImage() is called.

Essentially, what I am trying to do in this fiddle is to draw the SVG yellow circle image and an arbitrary SVG, provided by me, on the canvas. This seems to work in all major browsers except IE11. Is there anyone else having faced the same problem and knows some workaround?

Answer 1

IE 10 did not support <foreignObject> tag, but you did not need it to draw text on canvas, here i rewrite you fiddle, so now it works in IE - http://jsfiddle.net/skyr9999/5hhpo76h