CODEWITHSUNDEEP
html5-canvasandroid-browser
hexist
hexist

Reputation: 5250

html5 canvas pixel manipulation problems on mobile devices when setting the alpha channel

I'm attempting to do some raw pixel manipulation, but I'm seeing some very inconsistent results on my android device when setting the alpha channel. A simple example of the kinds of things I'm seeing:

<canvas id='canvas' width='128' height='128'></canvas>

var ctx = $("#canvas")[0].getContext('2d');
var image = ctx.getImageData(0, 0, 128, 128);

var idx = 0;
for (var y=0; y < 128; ++y) {
    for (var x=0; x < 128; ++x) {
        image.data[idx+0] = 128;
        image.data[idx+1] = 128;
        image.data[idx+2] = 128;
        image.data[idx+3] = (x+y);
        idx += 4;
    }
}

ctx.putImageData(image, 0, 0);

Code also available here: http://jsfiddle.net/U3rwY/

The intent of the above code is to have a solid gray square with alphas that increase from 0 to 255, so we should see a square that fades from the background color to gray at the bottom corner. And this is exactly what we see on any modern desktop browser:

Desktop Browser

On android though we see this:

Android Browser

Which looks like it is expecting a pre computed color instead of the 128,128,128 I'm giving it. Is that correct, and if so, is there a reliable way of detecting which browsers are expecting which set of values?

Upvotes: 4

Views: 670

Answers (2)

Cliclix
Cliclix

Reputation: 36

It is possible that your problem comes from a bug in the default browser of android, when it draws a pixel that contains an alpha value different from 0 or 255 it alters its color. You are not the only one experiencing this issue: https://code.google.com/p/android/issues/detail?id=17565

I guess the only chance to get it solved is to report the bug. Also, it seems that the bug was partly fixed in android 4.1 (while 4.0 still has it).

Upvotes: 2

Ashisha Nautiyal
Ashisha Nautiyal

Reputation: 1397

yeah on android browser there is problem with this . safari 6.0 and opera mobile works fine for that but not opera mini and firefox mobile . http://www.html5rocks.com/en/tutorials/canvas/hidpi/

here you can learn why .

Upvotes: 0

Related Questions