HTML5 Canvas (game) on iPad / Android tablets

Question

While attempting to make a game using Canvas I noticed a few quirks on tablet / phone browsers.

1) How do I disable the Canvas from being selectable? It seems like when the user touches it, it highlights the canvas, and almost makes an attempt to select it. This is undesired.

2) Browser slide gestures. Some browser have slide gestures that override any movement capturing done in the canvas or webpage. This is extremely annoying and undesired as well.

3) Canvas control with HTML UI elements. I noticed when there is a canvas present with fellow ui elements (such as text) sometimes clicking or dragging in the canvas will highlight a part of the HTML and instead drags the HTML elements instead of hitting the canvas.

Any help is greatly appreciated! I was hoping HTML5 would be mature enough to allow for good compatibility on mobile as well as desktop. The idea is to be able to code once and play everywhere....thanks!

Answer 1

This should fix your issues relating to #1 and #3:

canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);

#2 seems like an awfully separate question, but I've never had a problem with slide gestures overriding any of my canvas stuff. Try using e.preventDefault(); at the beginning of your touch events.