title: Drawing DOM elements (SVGs as foreign elements) on a canvas doesn't work in Internet Explorer
body: <p>I have successfully used <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas" rel="noreferrer">this</a> technique, to <strong>draw user input from DOM elements (such as input and selection fields) on a canvas and make it available as an image.</strong></p>
  
  <p>This works fine in Chrome, Safari and Firefox, but <strong>on Internet Explorer 11 , I get the following error</strong>:</p>
  
  <ul>
  <li><strong><em>XML5634: An attribute with the same name already exists on this element. Line: 1, Column 242</em></strong> , 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.</li>
  <li><strong><em>Unexpected call to method or property access.</em></strong> , when I try to reproduce the whole procedure on this fiddle:  <a href="http://jsfiddle.net/5mf4n7v3/" rel="noreferrer">http://jsfiddle.net/5mf4n7v3/</a>  . It seems from the debugger that the error  happens when   <code>ctx.drawImage()</code> is called.</li>
  </ul>
  
  <p>Essentially, what I am trying to do in this fiddle is to <strong>draw the SVG yellow circle image and an arbitrary SVG, provided by me, on the canvas</strong>. This seems to work in all major browsers except IE11. Is there anyone else having faced the same problem and knows some workaround?</p>