title: Cloudfront, No subdomain, and tainted canvas
body: <p>For two weeks we have been attempting to draw to canvas to capture a HTML 5 video as a still frame.
  The problem is the files are being served on a subdomain, and we receive variations of unable to draw to tainted canvas in all major browsers.</p>
  
  <p>The website, let's say mysite.com, reads media files, stored in an s3 bucket, with public access, cross origin headers, to a cloudfront distribution, with a cname, media.mysite.com, setup in Route53, as an A record with alias for media.mysite.com pointing to the cloudfront distribution.</p>
  
  <p>Cloudfront is configured to pass along the origin headers.</p>
  
  <p>Here's a bit of our code:</p>
  
  <pre><code>    var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var videoElement = player.el().querySelector('video');
      videoElement.crossorigin = "anonymous";
  
      player.controlBar.takeSnapshot = player.controlBar.addChild( takeSnapshot );
      player.controlBar.takeSnapshot.on('click', function(){
          canvas.width = videoElement.videoWidth;
          canvas.height = videoElement.videoHeight;
          ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
          console.log(canvas.toDataURL('image/png'));
      });
  </code></pre>
  
  <p>After all the configuring with various AWS services, we were able to get this to work only in chrome, while still failing in Safari.</p>
  
  <p>Sooo...how does one use their own assets on their own sites without tainting their own canvases with as much cross-browser compatibility as possible?</p>