title: putImageData/getImageData is not 100% accurate
body: <p>Basically <code>putImageData</code> and/or <code>getImageData</code> is not 100% accurate and I was wondering if there is a way to fix that (I'm not sure why it's not 100% accurate in the first place when you specifically choose each pixel data one by one). I made this so that it will be easier to understand what I'm talking about:
  <a href="http://jsfiddle.net/NmmMv/" rel="nofollow">http://jsfiddle.net/NmmMv/</a></p>
  
  <p>On FireFox on my computer the output of the text will be "2, 123, 255, 101" but on Chrome it will be "3, 121, 255, 101". Here's the actual code if you can't view the link for some reason:</p>
  
  <p>JavaScript:</p>
  
  <pre><code>C = document.getElementById('c');
  c = C.getContext('2d');
  d = c.getImageData(0, 0, C.width, C.height);
  for (i = 0; i &lt; d.data.length; i += 4) {
      d.data[0] = 2
      d.data[1] = 122
      d.data[2] = 255
      d.data[3] = 101
  }
  c.putImageData(d, 0, 0, 0, 0, C.width, C.height);
  d = c.getImageData(0, 0, C.width, C.height);
  document.getElementById('p').innerHTML = d.data[0] + ', ' + d.data[1] + ', ' + d.data[2] + ', ' + d.data[3]
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas width='100' height='100' id='c'&gt;&lt;/canvas&gt;
  &lt;p id='p'&gt;&lt;/p&gt;
  </code></pre>
  
  <p>I tried looking for a question like this but I did not find anything that was even related. And just in case if it will matter later, I need this to be 100% accurate even when using <code>toDataURL()</code> to upload the image to the website, and also when the website returns the data back for later and have the browser paint the image back on a new canvas.</p>