title: Why does HTML Canvas getImageData() not return the exact same values that were just set?
body: <p>When writing pixels to an HTML Canvas context using <code>putImageData</code> I find that the pixel values are not exactly the same when I fetch them again. I have put up a <a href="http://phrogz.net/tmp/htmlcanvas_putimagedata.html">sample test page</a> showing the problem. Boiled down, the problem is:</p>
  
  <pre><code>var id = someContext.getImageData(0,0,1,1);
  id.data[0]=id.data[3]=64; // 25% red, 25% alpha
  id.data[1]=id.data[2]=0;  // No blue or green
  someContext.putImageData(id,0,0);
  var newData = someContext.getImageData(0,0,1,1);
  console.log( newData.data[0] );
  </code></pre>
  
  <p>On Chrome v8, the red value comes back as <code>63</code>; on Firefox v3.6, Safari v5, and IE9 the red value comes back as <code>67</code> (all on Windows). On OS X, Chrome v7, Safari v5, and Firefox v3.6 also come back as <code>67</code>. None of them come back as the <code>64</code> value originally set!</p>
  
  <p>Using <code>setTimeout</code> to delay between setting and re-fetching makes no difference. Changing the background of the page makes no difference. Using <code>save()</code> and <code>restore()</code> on the context (per <a href="http://benzilla.galbraiths.org/2009/01/06/html-5-canvas-lessons-zooming-and-reusing/">this unlikely article</a>) makes no difference.</p>