title: HTML Canvas inaccurately sets pixel color when alpha is lower than one
body: <p>Please see this example: <a href="http://codepen.io/anon/pen/QNGzBP" rel="nofollow">http://codepen.io/anon/pen/QNGzBP</a></p>
  
  <pre><code>const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  
  // set pixel at 0,0 to rgba(2, 0, 255, 0.2)
  const imageData = ctx.getImageData(0, 0, 1, 1)
  imageData.data[0] = 2
  imageData.data[1] = 0
  imageData.data[2] = 255
  imageData.data[3] = 0.2 * 255 // 0.2 opacity
  ctx.putImageData(imageData, 0, 0, 0, 0, 1, 1)
  console.log('Setting pixel 0,0 to', {
    r: imageData.data[0],
    g: imageData.data[1],
    b: imageData.data[2],
    a: imageData.data[3] / 255
  })
  
  // retrieve pixel at 0,0
  const newImageData = ctx.getImageData(0, 0, 1, 1)
  console.log('Fetching pixel at 0,0', {
    r: newImageData.data[0],
    g: newImageData.data[1],
    b: newImageData.data[2],
    a: newImageData.data[3] / 255
  })
  </code></pre>
  
  <p>The above code modifies a single pixel on the canvas, and then retrieves it, while console logging the process. The canvas seems to mutate the RGB data when the alpha is lower than 1.</p>
  
  <p>It seems to occur both in Chrome and Firefox. Is this simply a browser bug? I'm producing a PNG out of the canvas, and require the colors to be 100% accurate. Is there any workaround?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p><a href="http://codepen.io/anon/pen/ZWLbKx" rel="nofollow">http://codepen.io/anon/pen/ZWLbKx</a></p>
  
  <p>More tests to show how the alpha mutates the rgb values.</p>