title: Blank PNG / Tainted canvases may not be exported (not using images)
body: <p>I am trying to export a fairly simple html to canvas and then png. To do so, I am using rasterizeHTML (<a href="http://cburgmer.github.io/rasterizeHTML.js/" rel="nofollow">http://cburgmer.github.io/rasterizeHTML.js/</a>).
  The problem that I am facing is that I get a warning like if I was loading an external image/resource, but I am not. 
  This is what I have tried: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;canvas height="500" width="500" id="rasterizer"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var canvas=document.getElementById("rasterizer");
  rasterizeHTML.drawHTML('&lt;div width="300px" height="300px" &gt; &lt;div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"&gt;&lt;div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; "&gt;            &lt;/div&gt;            &lt;div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"&gt;&lt;/div&gt;        &lt;/div&gt;&lt;/div&gt;',canvas);
  canvas.toDataURL("image/png");
  </code></pre>
  
  <p>The html just renders 2 circles, one above the other. Rasterizer is able to show this in the canvas with no problem, but then when I try to run .toDataURL I end up with one of two issues: </p>
  
  <ol>
  <li>A blank image (if it is the first time I run the code) the same size as the canvas.</li>
  <li>SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.</li>
  </ol>
  
  <p>I am out of ideas, since this should happen with external resources, not with fully inline-d html.
  Anyone know why this could happen? Thanks. </p>