HTML5 Canvas on Android Phones - Redraw and Highlight Issues

Question

I am having a redraw issue, when you are scrolling the canvas will not redraw until you release your touch. The problem with that is I depend on "ontouchmove" to move my character around. So until the touch is release, the canvas will not redraw.

Another problem is when ever the canvas is touched it is focus, or activated. It develops a focus ring around it. I tried setting both the :focus and :active pseudo's borders and outlines to nothing. Also I saw "drawFocusRing" for the context of the canvas, however that didn't seem to resolve the issue.

Currently I tested on Android stock browser 2.2 (MyTouch 3G)

Answer 1

I believe the orange focus ring is more in relation to the WebView you are using to view the canvas maybe? I know I had a similar issue with js drawing on a canvas.

myWebView.setFocusable(false)
myWebView.setFocusableInTouchMode(false)

Should solve the focus problem.

Answer 2

I don't know about Android specifically, but in mobile Safari you can prevent scrolling using the event.preventDefault() method. If your application requires scrolling, it might be possible to implement your own scrolling mechanism whilst still preventing the default behaviour, maybe by combining touch events with CSS positioning on a page wrapper div?