Going Mobile! - HTML5 Canvas - page 850

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
toaddanicontotheirHomescreeninterface.Thisiconwillplaytheapplication infullscreen
(without the top browser bar) and will function just like an app downloaded from iTunes. The
onlycaveatusthattheappisactuallyonawebpage,hostedonawebserver,andtheuserwill
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
corneronatablet browser.Scaling thegame toworkonthedesktopandmobile devices isnot
difficult,butitwillrequiresomechangesandadditionstothecurrentcodeinthe 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 position and scale the .html file. I am
going to call this version bsbingo_scaled.html . Here are the styles we will need to add to take
the scaled Canvas full screen:

< style style >

< style style type type = "text/css" >

html html , body body {

background-color

background-color : #2f9acc ;
margin

margin : 0px ;
padding padding : 0px ;

color color : #fff ;

height

height : 100 % ;
overflow overflow : hidden hidden ;

}

#canvas {

overflow hidden ;

image - rendering : optimizeSpeed ;

overflow : hidden