Question

My client is experiencing a bizarre bug in Firefox 12 on Windows: a blue tinted box is appearing around the drawn image in the canvas.
The canvas is inside an iframe inside a fancybox div. You may be able to see this in action by clicking the image thumbnail under the main image on this site:
http://mattmatthias.com/a/index.php?route=product/product&path=20&product_id=80

At first, I thought it was a selection issue, although the fact that the drawn image itself rather than the whole canvas seems to refute that. I’ve tried again and again to blur the canvas, the container div, the iframe… everything, to no avail.

What’s worse, I can’t reproduce this bug. Everything functions normally in Safari, Firefox, Chrome, and Opera on my mac.

This is probably the offending code, as it’s the only part of the code that draws anything:

    if(imageWidth == 0) return;

    context.clearRect(0, 0, canvasWidth, canvasHeight);



    var x_adjust = -x-(ratio*canvasWidth    -canvasWidth        )/2;
    var y_adjust = -y-(ratio*canvasHeight   -canvasHeight       )/2;

    var width   = scaledWidth*ratio;
    var height  = scaledHeight*ratio;


    if(x_adjust < canvasWidth - width)
        x_adjust = canvasWidth - width;

    if(x_adjust > 0)
        x_adjust = 0;

    if(y_adjust < canvasHeight - height)
        y_adjust = canvasHeight - height;

    if(y_adjust > 0)
        y_adjust = 0;


    if(width < canvasWidth) {
        x_adjust += (canvasWidth - width) / 2;
    }
    if(height < canvasHeight) {
        y_adjust += (canvasHeight - height) / 2;
    }


    context.drawImage(image, 0, 0,
                      imageWidth, imageHeight,
                      x_adjust, y_adjust,
                      width, height);

Any ideas? As I get more details, I will post them here.

Answer 1

This isn’t related to the canvas; just opening the image in Firefox shows the same thing. So it’s a problem with reading/rendering the image.

This Mozilla support issue sounds like precisely what’s happening here, and it’s related to a color management issue.

And indeed, removing the color profile from the image file makes the image look correct.

Depending on the particular case, instead of just stripping the profile you may want to do some conversion instead; whether that’s necessary depends on the particular image, profile, and on how big the probability is that color management even remotely has a chance of producing something meaningful on your visitors’ monitors (unless you cater to graphic designers: probably not very big).