HTML5 canvas (game) on iPad / Android tablets

Question

When I tried to make a game using Canvas, I noticed several quirks in browsers for tablets / phones.

1) How to disable Canvas for selection? It seems that when the user touches it, he selects the canvas and almost tries to select it. This is undesirable.

2) Gestures of browser slides. Some browsers have slide gestures that overlap any movements made on the canvas or web page. This is extremely annoying and undesirable.

3) Canvas management with HTML UI elements. I noticed that when there is a canvas with other ui elements (for example, text), sometimes clicking or dragging and dropping in the canvas selects part of the HTML and instead drags the HTML elements instead of hitting the canvas.

Any help is much appreciated! I was hoping HTML5 would be mature enough to provide good compatibility on both the mobile and the desktop. The idea is to be able to code once and play everywhere ... thanks!

Answer 1

This should fix your problems with C # 1 and # 3:

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

# 2 looks like a completely separate question, but I never had problems with slide gestures that redefine any of my things on canvas. Try using e.preventDefault(); at the beginning of your touch events.