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 other android phones and tablets such as the Nexus 7 & Galaxy S4 but their native browser is chrome, so it appears fine. This issue is also not present on any IOS browsers, Windows Desktop browsers or Mac Desktop browsers.

It's almost asif the webpage is loaded twice ontop of itself!

As there is a duplicate canvas element, that updates as the main canvas does.

Here it appears asthough it only happens when rotated in landscape mode, but I beleive that in portrait mode, the canvas' are perfectly aligned over the top.

What is even weirder, the menu button that you see is a toggle button, tap to open menu, tap to close menu. On this device when you tap it, it opens and closes instantly. the same happens for the mute button toggle.

I'm completely at a loss.

I have done some javascript debugging throwing in a few alerts here and there, and the initialisation functions that create references to the canvas and so on are only called once.

I have read and heard about hardware acceleration causing issues, but solutions i've potentially found are only relative to building native apps! not HTML5 Canvas webpages.

Any insight on this could be would be great! Thanks in advance.

--EDIT

I also put in this test alert(document.getElementsByTagName('canvas').length); to see if there was 2 canvas in the DOM but it returns 1!

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 other android phones and tablets such as the Nexus 7 & Galaxy S4 but their native browser is chrome, so it appears fine. This issue is also not present on any IOS browsers, Windows Desktop browsers or Mac Desktop browsers.

It's almost asif the webpage is loaded twice ontop of itself!

As there is a duplicate canvas element, that updates as the main canvas does.

Here it appears asthough it only happens when rotated in landscape mode, but I beleive that in portrait mode, the canvas' are perfectly aligned over the top.

What is even weirder, the menu button that you see is a toggle button, tap to open menu, tap to close menu. On this device when you tap it, it opens and closes instantly. the same happens for the mute button toggle.

I'm completely at a loss.

I have done some javascript debugging throwing in a few alerts here and there, and the initialisation functions that create references to the canvas and so on are only called once.

I have read and heard about hardware acceleration causing issues, but solutions i've potentially found are only relative to building native apps! not HTML5 Canvas webpages.

Any insight on this could be would be great! Thanks in advance.

--EDIT

I also put in this test alert(document.getElementsByTagName('canvas').length); to see if there was 2 canvas in the DOM but it returns 1!

• javascript
• android
• html5-canvas

• What about Checking the useragent of your Samsung then remove the second one. I am confused if this possible since length is 1 of canvas tag. – Anirudha Gupta Commented Aug 16, 2013 at 12:50
• Please try to provide a SSCCE of the problem, then we can see the source and try on other devices. – Pool Commented Aug 16, 2013 at 12:52
• @Pool Right, Since everyone don't have the samsung device do you have any trick in mind. I tried last time IOS simulator in Win7 through Webmatrix and it's failed to show me bug similar to the problem found in this question. – Anirudha Gupta Commented Aug 16, 2013 at 13:08
• 1 It isn't just to reproduce the issue, reducing the problem to a small test case also may help isolate the issue for RoryPicko92, or show some uncommon or incorrect usage that might cause some glitches. – Pool Commented Aug 16, 2013 at 13:34
• @Pool i created a SSCCE version and it was bug free! so i started added little functionality at a time, and I've narrowed it down to canvas scaling (with css) or the fact it is being positioned in the center of the screen using css left, here is the SSCCE version kokodev.co.uk/canvasbug – rorypicko Commented Aug 16, 2013 at 13:36

4 Answers 4

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.

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

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

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/