title: CORS on canvas not working on Chrome and Safari
body: <p>I'm trying to display images on a canvas. The images are hosted on S3. </p>
  
  <p>CORS is set up on AWS, and the <code>CrossOrigin</code> attribute is set to <code>anonymous</code> in the script.</p>
  
  <p><strong>Everything works fine on Firefox</strong> — but images are not being loaded on Chrome and Safari.</p>
  
  <p><em>Errors Safari:</em></p>
  
  <blockquote>
    <p>Origin <a href="https://www.example.com" rel="noreferrer">https://www.example.com</a> is not allowed by
    Access-Control-Allow-Origin.
    <a href="http://mybucket.s3.amazonaws.com/bubble/foo.PNG" rel="noreferrer">http://mybucket.s3.amazonaws.com/bubble/foo.PNG</a></p>
    
    <p>[Error] Failed to load resource: Origin <a href="https://www.example.com" rel="noreferrer">https://www.example.com</a> is not
    allowed by Access-Control-Allow-Origin. (foo.PNG, line 0)</p>
    
    <p>Cross-origin image load denied by Cross-Origin Resource Sharing
    policy.</p>
  </blockquote>
  
  <p><em>Errors Chrome:</em></p>
  
  <blockquote>
    <p>Access to Image at '<a href="https://mybucket.s3.amazonaws.com/bubble/foo.PNG" rel="noreferrer">https://mybucket.s3.amazonaws.com/bubble/foo.PNG</a>'
    from origin 'null' has been blocked by CORS policy: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin 'null' is therefore not allowed access.</p>
  </blockquote>
  
  <p>The CORS configuration is pretty standard. I tried <code>&lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;</code>, and a couple of other variations, but it didn't make any difference … with one exception: <code>&lt;AllowedOrigin&gt;null&lt;/AllowedOrigin&gt;</code> seemed to work for Chrome.</p>
  
  <p><strong>CORS configuration on AWS</strong></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;https://www.example.com&lt;/AllowedOrigin&gt;
      &lt;AllowedOrigin&gt;http://www.example.com&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
  &lt;/CORSRule&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Canvas Script</strong></p>
  
  <pre><code>let myImage = new Image();
  myImage.setAttribute('crossOrigin', 'anonymous');
  
  myImage.src = thisDocument.url;
  myImage.onload = function() {
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
  
    canvas.setAttribute('width', 200);
    canvas.setAttribute('height', 200);
  
    context.fillStyle = hsl(0, 50%, 50%);
    context.fillRect(0, 0, 120, 120);
    context.drawImage(myImage, 12, 12, 60, 60);
  };
  </code></pre>