Why are browsers displaying the colors in a png differently?

Question

I have an app that generates a base64 png from drawings on an HTML canvas.

I found that when looking at the colors using an eye-dropper extension, I get different colors between Chrome and Firefox. Neither of the browsers colors perfectly match the actual colors that I drew on the canvas (Chrome matched for 1 color).

First, I drew on the canvas in Firefox, and got the base64 png string.

I decoded that base64 here in both Chrome and Firefox: http://freeonlinetools24.com/base64-image

Note that I decoded the exact same base64 string (generated in FF), but got 2 different resulting images when decoding.

You can use any color picker extension to see the difference in the colors hex codes or RGB values.

Here are all of the colors, including the hex code for what I actually drew on the canvas, and the observed hex code for both Chrome and Firefox. The background is transparent, so the grey/black are just a difference in how the browsers display the transparency.

Orange:

• Expected: #ff7f0e
• Chrome: #ff7f0c (close)
• Firefox: #f08327

Blue:

• Expected: #1f77b4
• Chrome: #1f77b4 (match)
• Firefox: #3877b1

Green:

• Expected: #2ca02c
• Chrome: #2ca02b (close)
• Firefox: #549d39

Red:

• Expected: #d62728
• Chrome: #d62627 (close)
• Firefox: #c4352b

I don't understand why the base64 png wouldn't turn into the exact same RGB values across any browser.

Any ideas of what I can do to make the canvas.getDataURL() method return a base64 png that will have colors that match the colors that were drawn on it?

Answer 1

I narrowed the problem down. If I have a page with an img tag and set the src of the img tag to my image, the colors will render differently across different browsers.

Answer 2

By and large canvas.getDataURL() returns a different image, which differs from the original image at least in quality and type. To get original Base64 value use XMLHttpRequest + btoa or FileReader.readAsDataURL().