title: Javascript changing image color IndexSizeError: Index or size is negative or greater than the allowed amount
body: <p>I am writing a javascript code where image changes color specified by a user.. the code is complete from my side.. but strangely mozilla throw the error <code>IndexSizeError: Index or size is negative or greater than the allowed amount</code> when cleared the cache and next time it runs good.. on chrome it does not run at all .. it says <code>Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data.</code></p>
  
  <p>Im not sure what seems to be the problem as i had spent 3 4 hours debugging it, but i couldn't. So i had to come here.. </p>
  
  <p>please let me know if its a error that can be solved. </p>
  
  <p>CODE: </p>
  
  <pre><code>    &lt;ul&gt;
          &lt;li&gt;
              &lt;img src="mug.png" id="mug_image" class="the_image" width="200"&gt;
              &lt;input type="text" id="mug_color" value="#6491ee"&gt;
              &lt;input type="button" value="change color" class="changeColorButton" id="mug_button"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;img src="rug.png" id="rug_image" class="the_image" width="200"&gt;
              &lt;input type="text" id="rug_color" value="#6491ee"&gt;
              &lt;input type="button" value="change color" class="changeColorButton" id="rug_button"&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="rug.png" id="nug_image" class="the_image" width="200"&gt;
              &lt;input type="text" id="nug_color" value="#6491ee"&gt;
              &lt;input type="button" value="change color" class="changeColorButton" id="nug_button"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;script type="text/javascript"&gt;
         $(document).ready(function(){ // Begin scoping function
              var originalPixels = [];
              var currentPixels = [];
              var the_images = $('.the_image');
              var canvas = [];
              var ctx = [];
              $.each(the_images, function(ind, val) {
                  var get_id = $(this).attr('id');
                  var the_id_arr = get_id.split('_');
                  the_id = the_id_arr[0];
                  canvas[the_id] = document.createElement("canvas");
                  ctx[the_id] = canvas[the_id].getContext("2d");
                  originalPixels[the_id] = '0';
                  currentPixels[the_id] = '0';
                  getPixels(canvas[the_id], ctx[the_id], the_id, val);
              });
  
              $('.changeColorButton').click(function() {
                  var button_id = $(this).attr('id');
                  var the_id_arr = button_id.split('_');
                  var the_id = the_id_arr[0];
                  var the_image = $('#' + the_id + '_image');
                  var the_color = the_id + '_color';
                  changeColor(canvas[the_id], ctx[the_id], originalPixels[the_id], currentPixels[the_id], the_image.get(0), the_color);
              });
  
              function HexToRGB(Hex)
              {
                  var Long = parseInt(Hex.replace(/^#/, ""), 16);
                  return {
                      R: (Long &gt;&gt;&gt; 16) &amp; 0xff,
                      G: (Long &gt;&gt;&gt; 8) &amp; 0xff,
                      B: Long &amp; 0xff
                  };
              }
  
              function changeColor(canvas, ctx, originalPixels, currentPixels, obj, color_id)
              {
  
                  if (!originalPixels)
                      return; // Check if image has loaded
                  var newColor = HexToRGB(document.getElementById(color_id).value);
                  for (var I = 0, L = originalPixels.data.length; I &lt; L; I += 4)
                  {
                      if (currentPixels.data[I + 3] &gt; 0)
                      {
                          currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                          currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                          currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                      }
                  }
                  ctx.putImageData(currentPixels, 0, 0);
                  obj.src = canvas.toDataURL("image/png");
              }
  
              function getPixels(canvas, ctx, the_id, img)
              {
                  canvas.width = img.width;
                  canvas.height = img.height;
                  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                  originalPixels[the_id] = ctx.getImageData(0, 0, img.width, img.height);
                  currentPixels[the_id] = ctx.getImageData(0, 0, img.width, img.height);
                  img.onload = null;
              }
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>EDIT : the main prob now is <code>Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data.</code> on chrome.</p>