title: canvas tainted due to crossOrigin but the image is on my computer
body: <pre><code>Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.(…)
  </code></pre>
  
  <p>This is the console exception I'm getting on chrome however it's strange because I'm not grabbing any information, files or images cross server, everything I'm using is on my computer on a file. I may be misunderstanding what this error means.</p>
  
  <p>Here is the code anyways </p>
  
  <pre><code>function draw(image,x,y,color = 0) {
  
  context.drawImage(image,x,y);
  
  if(color != 0) {
      var dat = context.getImageData(x,y,image.width,image.height);
      var map = dat.data;
      var len = map.length;
      if(color == "red") {
          for(i = 0;i &lt; len;i += 4 ) {
              map[i + 0] += 50;
              map[i + 1] -= 50;
              map[i + 2] -= 50; 
  
          }
      }
      context.putImageDate(dat,x,y);
    }
  }
  </code></pre>
  
  <p>The image is loaded from a folder called "images" which is in the same directory as my .html file. Any suggestions on how to fix this? Thank you!</p>