title: canvas getImageData isn't working
body: <p>I have tried to getImageData but in the console I see this error:</p>
  
  <blockquote>
    <p>Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.<br>
            at HTMLImageElement.img.onload (file:///C:/Users/HOME/Desktop/programmi/HTML-Javascript/caso/graphic/imgData/arc/main.js:16:17)</p>
  </blockquote>
  
  <p>This is my JavaScript and HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    width = canvas.width = 434, 
  height = canvas.height = 362; 
  
  var img = new Image();
  
  img.src = 'https://cdn.pixabay.com/photo/2017/02/26/12/27/oranges-2100108_640.jpg';
  //img.crossOrigin = 'Anonymous';
  
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var data = ctx.getImageData(10, 10, 11, 11);
    console.log(data)
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;canvas id='canvas'&gt;&lt;/canvas&gt;
    &lt;script type="text/javascript" src='main.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>