Inconsistent canvas drawing in Android browser

Posted by user2943466 on Stack Overflow See other posts from Stack Overflow or by user2943466
Published on 2013-11-01T03:50:57Z Indexed on 2013/11/01 3:53 UTC
Read the original article Hit count: 160

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about android