4

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?

hexist
  • 5,151
  • 26
  • 33

2 Answers2

2

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).

Cliclix
  • 36
  • 2
0

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 .

Ashisha Nautiyal
  • 1,389
  • 2
  • 19
  • 39
  • So the link you posted seems to be talking about scaling issues, which is a bit different than the issue I'm seeing here. What i'm seeing is that those two images should be identical, but one is half black because I'm doing something the android browser considers wrong when setting the alpha channel.. – hexist Mar 01 '13 at 21:10