title: Inserting HTML into canvas without creating CORS restriction
body: <p>I am trying to get the image data from a canvas to which I added a HTML element's data by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas#JavaScript" rel="nofollow">MDN's method</a>. After I insert the HTML data, I can't access the canvas' image data anymore though (in Chrome):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//This function is a direct copy of https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas#JavaScript
  onload = function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
  
    var data = '&lt;svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"&gt;' +
        '&lt;foreignObject width="100%" height="100%"&gt;' +
        '&lt;div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px"&gt;' +
        'example' +
        '&lt;/div&gt;' +
        '&lt;/foreignObject&gt;' +
        '&lt;/svg&gt;';
  
    var DOMURL = window.URL || window.webkitURL || window;
  
    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svg);
  
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
      getData(ctx);
    };
  
    img.src = url;
  };
  
  //the part where it goes wrong:
  function getData(ctx) {
    try {
      ctx.getImageData(0,0,100,100);
    } catch(e) {
      alert(e);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My question is: is it possible to insert the HTML data, and still be able to access the image data?</p>