HTML5 Canvas image discoloration

3
votes

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>
1
htmlimagecanvas
What is the file extension of the image you are using? – tbh__
Could you share the related code? Would make it easier to try to reproduce – Parker
I'm using a PNG. @Parker Sure, added to the post. – John
Odd, looks like Chrome is doing it even without the Canvas involved. Seems to be irrelevant with the canvas itself. – John
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__

1 Answers

3
votes

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.