title: Issues displaying image on canvas due to Cross-Origin Resource Sharing policy
body: <p>So I'm trying to write an image filter using the HTML5 canvas, but before I can do that, I need to be able to draw images onto the canvas. I tried a few things and ended up finding many sources saying that the image.crossOrigin property had to be set to "anonymous" before setting the source of the image. I tried this and copied some code that apparently worked for some others but still wasn't able to get it to work.</p>
  
  <p>This code is at the bottom of the body tag, with draw being called from body's onclick property.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;script&gt;
  function draw() {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      var img = new Image();
      img.onload = function(){
          context.drawImage(img, 40, 40);
      }
      img.crossOrigin = "Anonymous";
      img.src = "field.jpg";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The image's link is local, but I also tried with a dropbox link for the same image and neither worked.</p>
  
  <p>Error with local file:</p>
  
  <pre><code>Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.
  </code></pre>
  
  <p>Error with dropbox:</p>
  
  <pre><code>Image from origin 'https://www.dropbox.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
  </code></pre>
  
  <p>Can anyone see what I'm doing wrong?</p>
  
  <p>Edit: I'm on chrome for those who wanted to know</p>