HTML5 Canvas, 2nd Edition

Scaling the Game for the Browser

The cool thing about HTML5 Canvas, especially when it comes to Mobile Safari, is that we can easily create applications that scale to the full screen of an iOS device and allow the user to add an icon to their Home screen interface. This icon will play the application in full screen (without the top browser bar) and will function just like an app downloaded from iTunes. The only caveat us that the app is actually on a web page, hosted on a web server, and the user will need Internet access to use it.

Starting to create a full screen mobile version of BS Bingo

We now have a game that is shoved up into the top-left corner of the browser window, and while it plays fine, it will be too small on a phone browser and will be shoved up into the corner on a tablet browser. Scaling the game to work on the desktop and mobile devices is not difficult, but it will require some changes and additions to the current code in the bsbingo.html file.

The game’s aspect ratio is not ideal for a mobile Safari full screen application, so we will see soon enough that the buttons and text will look a little pixilated and not fit perfectly on the iOS screens. However, this is only the first of two examples, and it will be good to see it in action to educate ourselves about what changes we should make for the second application in the chapter so that it will fit better on an iOS screen.

Changing the Canvas style properties

We will need to add some new styles to the file to help ...