Question

I’m learning HTML5 and when doing some basic things like canvas pixel manipulation, found out that Opera messes up the image completely when I want to change a color channel.
I’ve cooked up a small test page that should speak for itself: http://gda.0fees.net/tests/opera/canvas2.html (NB: the “expected result” images are dynamically loaded and the server is kind of slow).

The script takes the image and changes the red value for every pixel in a uniform manner. Here’s the central point of my code (which you can see in full via the link above):

for (var i = 0, l = matrix.data.length; i < l; i += 4)
{
    matrix.data[i] += delta;
    if (matrix.data[i] > 255) matrix.data[i] = 255;
    if (matrix.data[i] < 0  ) matrix.data[i] = 0;
}

In Chrome, Firefox, IE 9, and Safari it works like a charm. In Opera, however, I get this result for both transformations: http://gda.0fees.net/tests/opera/opera.jpg

Am I doing something wrong? Is this a known bug? Can it be suppressed?

Answer 1

If I had to guess I’d say the red channel value was wrapping round to some invalid value. Note (in the source image) that the bugged areas are all much brighter overall than the areas that are properly treated.

It might be that its doing some sort of limit check, zeroing the red value of pixels where the original red value + 128 would exceed the maximum value used to represent colour components (a uint 8 maybe?).

I’ve never used HTML5’s canvas before, but if you can sample the colour of each pixel, you might be able to suppress it by guessing the maximum value and checking to make sure you don’t exceed it when augmenting that particular pixel’s colour component.

Try this:

// Apologies, my JavaScript is very rusty, and this isn't how I would do this.
for (var i = 0, l = matrix.data.length; i < l; i += 4)
{
    var current_red = matrix.data[i];
    var new_red = 0;

    if((current_red + delta) > 255) new_red = 255;
    else if((current_red - delta) < 0) new_red = 0;
    else new_red = current_red + delta;
}

// What I would do is this:
for (var i = 0, l = matrix.data.length; i< l; i+=4)
{
    // I don't know if JS has a clamp function :D
    matrix.data[i] = clamp(matrix.data[i] + delta, 0, 255);
}