1

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

enter image description here

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

enter image description here

Miko Diko
  • 944
  • 1
  • 13
  • 33

1 Answers1

2

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

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).

Community
  • 1
  • 1
Kerri Shotts
  • 2,372
  • 1
  • 17
  • 19
  • 1
    canvas.width = canvas.width; fixes this BUT it's slower than clearRect(), is there a way to avoid canvas.width = canvas.width; after all ? – Miko Diko May 06 '14 at 19:46