# Html5 games, what is the standard dimension to use?

I am trying to make html5 games to be played on the browser(not offline apps), and I am trying to support the maximum number of platforms, hence I need to know what dimension should I use for the game canvas so that it works in the most number of places.

Also is there anyway to "scale" a large game to fit in the tiny size of iphone(around 320x356px I think). By "scale" I don't mean to actually resize just the canvas, as because that can mess up the coordinate based calculations, and for a large number of objects, re-positioning based on canvas size can be a real hassle.

• Just FYI: First iPhones are 480x320, since iPhone 4 (Retina-display) it's 960x640 – bummzack Apr 1 '12 at 6:38

Google collects data on the average size of the browser window people use when visiting their website:

As you can see 98% of the people browsing have a window size of at least 800x400 so I suppose that is a good start. Of course if you think your game will be played mostly on phones the statistics may be slightly different since these statistics are desktop+mobile.

• Please, this is kinda important to me, @Roy, but does Google include mobile devices in their statistics? I plan for my game to be playable only from PCs, so I'd like to have accurate dimensions only for them, not mobile phones. – jcora Apr 6 '12 at 21:44
• I'm not sure, it doesn't say but I think they also include mobile devices. You can also look at the steam hardware survey here: store.steampowered.com/hwsurvey it's PC only and gamer only so that might be more like your target demographic. In that case 1366 x 768 or 1280x720 seem like a very safe bet. – Roy T. Apr 7 '12 at 7:12

I think this question cannot be answered with a number for the and for the height. There are just too much different display formats. I think that the discussion of the games dimensions should be based on the game. What I mean is: Tetris in landscape format might not be that cool as in portrait. I prefer setting an fix aspect ratio, which always can be scaled safely into the available space.

iPhones (and most smartphones I believe) automatically scale web pages to fit the width of the device, thus you can actually make your game in a different scale and as long as the page isn't too tall relative to its width it will automatically fit on the screen.

As far as I have quickly read you can also use a viewport tag to get more precise control of this process. It's not something I have experience with, but it seems worth looking into.

check this awesome tutorial for scaling:

http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

EDIT: an idea for object placement and scaling, not sure if its correct / practically doable. I am yet to try this:

• have some base dimension like (960 x 640)
• while writing game logic, handle positions / scale as if you are developing only for 960x640.
• at the time of rendering, multiply the position and scales with these factors screenWidth / 960 for x-axis and screenHeight / 640 for y-axis, where screenWidth and screenHeight are actual screen dimenstions.
• The actual scaling of the game is not the problem, but what happens with the coordinate system afterwards is. – jcora Apr 1 '12 at 19:19
• That's why you shouldn't work in absolute coordinates for rendering, which that article mentions. – Roy T. Apr 1 '12 at 20:07
• OK. Also, you might want to scale images and positions before, not to it on every rendering iteration. – jcora Apr 7 '12 at 12:30

i used ImpactJS, a game engine that automatically resizes a game to a required dimension, taking into account retina displays from the iPhone4. The coordinate systems are not screwed this way.