title: Tainted canvas cannot be exported
body: <p>Following this thread
  <a href="https://stackoverflow.com/questions/44800431/caching-effect-on-cors-no-access-control-allow-origin-header-is-present-on-th">Caching effect on CORS: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource</a></p>
  
  <p>I've been able to solve a strange CORS issue with my html-canvas. As described in the thread above, I got the standard browser CORS violation warning when adding images via the function below but quite "randomly" depending on clearing browser cache or not, I cannot really reproduce why. When <em>removing</em> the <code>crossOrigin: 'anonymous'</code> attribute, I was perfectly able to add images to a canvas from S3 via this function:</p>
  
  <pre><code>fabric.Image.fromURL url, ((img) -&gt;
      # scale template image
      img.scale 0.5
      img.name = 'template_img'
      # add image to canvas
      canvas.add img
      # send to back
      canvas.sendToBack img
      # make not selectable since its the background image
      img.selectable = false
      return
    )
  </code></pre>
  
  <p>Now my App wants to EXPORT the canvas via</p>
  
  <pre><code>dataURL = canvas.toDataURL(
          format: 'png'
          quality: 0.8)
  </code></pre>
  
  <p>However, due to the now missing <code>crossOrigin = 'anonymous'</code> attribute, this is being blocked by the browser:</p>
  
  <blockquote>
    <p>DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement':
    Tainted canvases may not be exported.</p>
  </blockquote>
  
  <p>In fact, I am in a loop now:</p>
  
  <ol>
  <li>Adding the crossOrigin attribute makes adding images on my canvas fail.</li>
  <li>Removing the crossOrigin attribute makes me adding images on my canvas but disallows to export it</li>
  </ol>
  
  <p>I have tried everything to make this work, playing around with CORS rules as well but besides the standard wildcards and domain-settings, there is not much I can do.</p>
  
  <p>My CORS ruleset on AWS S3:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
  &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
      &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;
      &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
      &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
  &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>What can I do to add images to my canvas and export it afterwards?</p>