Dynamically loaded Image drawn to a canvas in java

Question

I have some .PNG images hosted on my own NGINX webserver and I've found that when I load them programatically and then draw them to a canvas via context.drawImage(img, 0, 0); and pull the image data via context.getImageData(x, y, 1, 1).data that the pixel RGB values are incorrect. I did find that if I open the image in its own tab and drag it to my desktop it saves as a .BMP with the incorrect color values, yet if I 'file save as...' it saves correctly as a .PNG with correct color. so I'm not 100% certain this is a js issue or a server issue.

http://i.imgur.com/Dr6U0V2.png
Top is what I expect
Bottom is what I get

Answer 1

To speed up canvas browsers will alpha-premultiply the color values in its buffer.

This is a lossy process so when you do .getImageData the result will often be "close to but not exactly" what you originally drew on the canvas.