canvas.clearRect bug in Android Stock Browser

[hima]

I've recently encountered this bug and I think it might be useful

 

https://code.google.com/p/android/issues/detail?id=39247

 

Basically, the clearRect doesn't work on Android stock browser starting from Android 4.0 This mean you have to fill the canvas with a solid color before redrawing. Therefore, you can't layering many transparent canvases together.

 

None of the other browsers have this problem. I can't wait until the stock browser is replaced by Chrome or anything really

[Jon Goikolea]

I've spent the day trying to figure out what the hell was going on with the modern android devices.This is obviously the issue. Good to know, it´s a relief and a new headache at the same time . Thanks!

[Chris]

What about:

ctx.fillStyle = "rgba(0, 0, 0, 0)";ctx.fillRect (0, 0, canvasWidth, canvasHeight);

[Jon Goikolea]

What about:

ctx.fillStyle = "rgba(0, 0, 0, 0)";ctx.fillRect (0, 0, canvasWidth, canvasHeight);

I've just tried it with the Android virtual machine and it doesn't show any love to this.

 

I was rendering a game over a static image so I think I'll just detect the troublemaker android browser versions and render the scenario to the canvas only for these cases.

[Chris]

Okay, another crazy approach:

Create a 1x1px PNG file that contains the color RGBA(0,0,0,0). (means: a blank pixel).

Then try this:

 

var reset,    resetReady;reset.onload = function(){    resetReady = true;}reset.src = 'myBlankImage.png';//In your gameloop:if(resetReady){    ctx.drawImage(reset, 0, 0, canvasWidth, canvasHeight);}

[Ezelia]

maybe this can work

 

var w = canvas.width;var h = canvas.height;   // save old width/heightcanvas.width = canvas.height = 0;  //set width/height to zerocanvas.width=w;canvas.height=h;   //restore old width/height 

[Chris]

This seems to be the most un-performant approach since the canvas element is completly re-created upon dimension changes. Also, when you look into the bug report linked in OP, a commenter noted that it may cause the briwser to crash sometimes when done repeatingly. I assume that is somehow related to the garbage collector because you are creating a mountain of abandoned objects.

[Ezelia]

I hate Android stock browser xD

[Jon Goikolea]

Okay, another crazy approach:

Create a 1x1px PNG file that contains the color RGBA(0,0,0,0). (means: a blank pixel).

Then try this:

 

var reset,    resetReady;reset.onload = function(){    resetReady = true;}reset.src = 'myBlankImage.png';//In your gameloop:if(resetReady){    ctx.drawImage(reset, 0, 0, canvasWidth, canvasHeight);}

It won't work. Drawing transparent pixels doesn't imply clearing them. Anyway I will test it now.

[Chris]

It won't work. Drawing transparent pixels doesn't imply clearing them. Anyway I will test it now.

I think you are right. Canvas will only draw when there is something to draw - or in other words: it will draw with respect to the alpha value, so only modifying the underlying pixels instead of replacing them. Nevermind - forget about the PNG approach.

A last thing comes to my mind, but I have no idea if this is performant, or not:

 

var ctx,    clearData;ctx = document.getElementById('myCanvas').getContext('2d');clearData = ctx.createImageData(canvasWidth, canvasHeight);//Inside your game loopctx.putImageData(clearData, 0, 0);

[Gio]

Is the latest version of Chrome for Android doing this too now? Or is it just me?

[Gio]

To answer my own question, hoping it may help someone else:

 

the latest Android Chrome has a similar problem, but if you only use integers for the clearRect parameters it's all good. Kinda makes sense, though the official spec says the numbers can be "unrestricted doubles".