html5 canvas support in mobile phone browser

html, html5-canvas, mobile

Solution

Controls

This is where you can get creative. A virtual keypad will do or maybe divide the screen in to sections. Left section is left, right section is right, etc. Really depends on your type of game.

A really good tutorial for a virtual keypad can be found here. Check out the demo!

Events

Check out Apples guide on how to add events.

Basically it's the following:

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);

Alternatively, I recommend a library like hammerJS. It handles touch events and simplifies gestures for you.

Screen sizes

Apple is easy, you have 320×480, 640×960, 640×1136

Android is a little more complex. Best answer is to check out the following page provided by Google: Screen size analytics.

They're generally divided in to the following categories

xlarge screens are at least 960dp x 720dp large screens are at least 640dp x 480dp normal screens are at least 470dp x 320dp small screens are at least 426dp x 320dp

Problem

I develop a simple html5 based game. In this game has 4 control keys left,right,up and down arrows (keydown event). It worked good in my laptop browser.I like to customize this game for mobile phones. What are the suitable events for read input in mobile phones(Android,IOS). And standard dimension(height and width) of canvas in mobile browser?

Original source