Phonegap HTML5 Canvas Layer Not Cleared (Only On Device)

Question

Writing a Phonegap (3.4) app for Android (Galaxy S4 4.3). App has: Background (zIndex = 0) Layer (zIndex = 1)

The background never changes. The Layer is scrollable with touch or onmousedown, because it shows images from another shadow canvas (which is bigger than the screen in height).

The code that 'refreshes' the Layer canvas (contextInChat), cause the user is scrolling:

contextInChat.clearRect(0, 0, canvasInChat.width, canvasInChat.height);
contextInChat.drawImage(canvasNewChat, 0, chats.getCurrentChat().getYPosition(), windowWidth, chat_screen_height, 0, 0, canvasInChat.width, canvasInChat.height);

This works OK in my PC browser using Firefox (A movable rect):

But when testing on the device, it does scroll BUT the problem is that it doesn't clear how the Layer was before starting to move it (Moving it upwards, the bottom rect was there before starting to move, but the upper rect is being moved "ok", the bottom rect should have been cleared with the clearRect() above):

Answer 1

I think it's a bug, and a frustrating one at that. Some of these pages might be helpful in fixing your problem (although I was never able to eliminate it on a Nexus 7 with 4.3):

• https://medium.com/p/ffcb939af758
• https://code.google.com/p/android/issues/detail?id=35474
• HTML5 canvas issues on Android 4.1.1
• Android 4+ html5 canvas not redrawing
• Phone Android HTML5 Hardware Acceleration - Canvas

You might want to consider Project Crosswalk (https://crosswalk-project.org), which essentially uses a Chrome webview with accelerated canvas to get around the rotten support for canvas in the system web browsers (including 4.4, which doesn't accelerate the canvas... sigh).