Inconsistent canvas drawing in Android browser

Question

In putting together a small canvas app I've stumbled across a weird behavior that only seems to occur in the default browser in Android.

When drawing to a canvas that has the globalCompositeOperation set to 'destination-out' to act as the 'eraser' tool, Android browser sometimes acts as expected, sometimes does not update the pixels in the canvas at all.

the setup:

context.clearRect(0,0, canvas.width, canvas.height);
context.drawImage(img, 0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'destination-out';

draw a circle to erase pixels from the canvas:

context.fillStyle = '#FFFFFF';
context.beginPath();
context.arc(x,y,25,0,TWO_PI,true);
context.fill();
context.closePath();

a small demo to illustrate the issue can be seen here: http://gumbojuice.com/files/source-out/ and the javascript is here: http://gumbojuice.com/files/source-out/js/main.js

this has been tested in multiple desktop and mobile browsers and behaves as expected. On Android native browser after refreshing the page sometimes it works, sometimes nothing happens.

I've seen other hacks that move the canvas by a pixel in order to force a redraw but this is not an ideal solution..

Thanks all.

Answer 1

I did something like this, which forces the detachment of the canvas:

ctx.clearRect(0, 0, canvas.width, canvas.height);

if (isStockAndroid) {
    canvas.style.display = "none";
    canvas.offsetHeight;
    canvas.style.display = "block";
}

That seems to be the most efficient as far as FPS is concerned. Otherwise it's the not-so-nice:

canvas.width = canvas.width;

...which seemed to also get it all working normally for me. Haven't tested to see if the first is essentially the same as the second and resets canvas settings, though, but it seems to be getting a higher frame rate? Anyway that definitely clears things. For the native detection stuff try here: How to detect only the native Android browser