HTML5 Canvas image discoloration

Question

I've noticed HTML5 Canvas adds slight discoloration on certain browsers when using drawImage. I know it happens on Google Chrome and Mozilla Firefox. Internet Explorer and Chrome Android seems to work fine. What is causing this? My context's globalAlpha is 1.0. The discoloration is usually 1-5 RGB values off. Note that there are no problems when using Canvas' fillRect, etc.

Upon further inspection, looks like this is more a problem from the browser combined with Photoshop exported images, and is irrelevant with the Canvas itself.

Color comparison var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");

    var img = new Image();
        img.src = "http://i.imgur.com/NTRjnRb.png";
        img.onload = function(){
            ctx.fillStyle = "#FFF";
            ctx.fillRect(0, 0, 450, 800);
            ctx.drawImage(img, 0, 0);   
        }
</script>

Could you share the related code? Would make it easier to try to reproduce — Parker, Oct 22 '14 at 04:15
Odd, looks like Chrome is doing it even without the Canvas involved. Seems to be irrelevant with the canvas itself. — John, Oct 22 '14 at 04:21
The image above, when I run it through canvas, screenshot it, and sample it with a color picker, both of the colors stay the same. I'm wondering if it's something with the encoding of the original image. — tbh__, Oct 22 '14 at 04:22
Same thing when running this code, and checking the colors, it looks the same. Checkout this: http://stackoverflow.com/questions/7510234/opera-and-chrome-is-changing-colors-of-my-images-why-how-to-stop-that — tbh__, Oct 22 '14 at 04:30
http://stackoverflow.com/questions/6141145/image-color-differences-in-different-browsers-firefox-chrome-ie help at all? — Parker, Oct 22 '14 at 04:32
Not much luck. It can probably be fixed by changing some Photoshop settings. BMPs seem to look fine color wise (but are obviously not ideal for actual use). Tried playing with Color Settings but didn't seem to work, might have done it incorrectly though. MS Paint saves PNGs fine, no discoloration in browser. — John, Oct 22 '14 at 04:40

score 3 · Accepted Answer · 2014-10-22T05:03:57.567

This is because of color management and is not related to canvas but to the image loading itself. When an image is loaded into memory the browser will apply monitor ICC as well as embedded ICC if any, to the color values. When you next draw the image to canvas the color values of the image is already set in stone.

Chrome and FF support ICC profiles directly and will apply using both image ICC (if any) and monitor ICC profile.

Internet Explorer v9-11 supports ICC through the Windows Color system.

In addition to ICC there is gamma correction which also may affect the actual color values in the out end. If that wasn't enough then there are different versions of ICC profiles, ie v4 does not have quite the support it should have by now.

ICC profile version test results:

ICC support:           v2     v4

Firefox 34              X      -
Chrome 40 / Opera 25    X      -
Internet Explorer 11    X      X

As you can see IE supports both version 2 and 4 (although through Windows own color system) which can explain the situation if you save an image with ICC profile version 4 (I cannot test Android Chrome at the moment).

To save out PNG without ICC from Photoshop use "Save for web" and tick off ICC embedding.

menu snapshot from PS

For a more in-depth (sub-link from the test) you can see this article:
Web browser color management guide.

"Save for web" works perfectly. Informative, never knew images were more than just some color data. Thanks! — John, Oct 22 '14 at 04:53
@John no problem. Color management causes headaches world wide on a daily basis... :) — , Oct 22 '14 at 04:56

HTML5 Canvas image discoloration

1 Answers1