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: 156
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