title: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D':
body: <p>whenever i run this code get the error are as bellow.
  Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
  i m also try this statement img.crossorigin= "anonymous" but not get proper output,if any one knows then help me.</p>
  
  <pre><code>          &lt;!DOCTYPE html&gt;
            &lt;html lang="en"&gt;
            &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="stylesheets/chromagallery.css"&gt;
        &lt;style type="text/css"&gt;
  
      body,html{height: 100%;}
      .content
      {
          width: 100%;
          height: 100%;
          margin: 10px auto;
      }
  
      .chroma-gallery-logo
      {
          width: 300px;
          height: 124px;
          background: url(images/chromagallery_logo.png) no-repeat;
          margin: 25px auto;
      }
  
      .mygallery{margin: 25px 0;} 
  
      @media screen and (max-width: 400px) /* small logo */ 
      {
        .chroma-gallery-logo
        {
          width: 200px;
          height: 83px;
          background-size:200px 83px;
        }
      }
  
      @media screen and (min-width: 980px) /* Desktop */ 
      {
        .content {width: 60%;}
      }   
  
       &lt;/style&gt;
       &lt;title&gt;Chroma Gallery&lt;/title&gt;
           &lt;/head&gt;
           &lt;body&gt;
  
  &lt;div class="chroma-gallery-logo"&gt;&lt;/div&gt;
  
  &lt;div class="content"&gt;
      &lt;div class="chroma-gallery mygallery"&gt;
          &lt;img src="images/thumbs/1.jpg" alt="Pic 1" data-largesrc="images/1.jpg"&gt;
          &lt;img src="images/thumbs/2.jpg" alt="Pic 2" data-largesrc="images/2.jpg"&gt;
          &lt;img src="images/thumbs/3.jpg" alt="Pic 3" data-largesrc="images/3.jpg"&gt;
          &lt;img src="images/thumbs/4.jpg" alt="Pic 4" data-largesrc="images/4.jpg"&gt;
          &lt;img src="images/thumbs/5.jpg" alt="Pic 5" data-largesrc="images/5.jpg"&gt;
          &lt;img src="images/thumbs/6.jpg" alt="Pic 6" data-largesrc="images/6.jpg"&gt;
          &lt;img src="images/thumbs/7.jpg" alt="Pic 7" data-largesrc="images/7.jpg"&gt;
          &lt;img src="images/thumbs/8.jpg" alt="Pic 8" data-largesrc="images/8.jpg"&gt;
          &lt;img src="images/thumbs/9.jpg" alt="Pic 9" data-largesrc="images/9.jpg"&gt;
          &lt;img src="images/thumbs/10.jpg" alt="Pic 10" data-largesrc="images/10.jpg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/modernizr-chrg.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/masonry.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/chromagallery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() 
      {
          $(".mygallery").chromaGallery();
      });
  &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>