Android Native Browser duplicating HTML5 canvas (fine in chrome)

Question

This is a weird issue that I am only experiencing on a Native browser on Samsung Galaxy Tab 2 and Galaxy S2 in the native browser.

This has also been tested on othe

Answer 1

For double canvas issue there is a bug logged https://code.google.com/p/android/issues/detail?id=35474 you may want to check suggested solutions.

In my case this issue appeared only if I had Force GPU rendering enabled.

Issue usually appears if you have some parent element for canvas that has CSS overflow: hidden

Answer 2

Also you may look at this collections of such tips: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

Answer 3

I ran into this same issue. I was able to fix this by running the following code after making a change to my canvas:

// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {

    // Tweak the canvas opacity, causing it to redraw
    $('canvas').css('opacity', '0.99');

    // Set the canvas opacity back to normal after 5ms
    setTimeout(function() {
        $('canvas').css('opacity', '1');
    }, 5);

}

By tweaking the opacity, this forced the canvas to redraw and removed the duplicate shapes. It's a dumb fix but it works. Hopefully this helps someone.

Answer 4

remove overflow property from all canvas parents,probably we don’t need this property on touch devices:

$("canvas").parents("*").css("overflow", "visible");

It is well explained at http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/