Adapting to Different Devices - Building JavaScript Games for Phones, Tablets, and Desktop - page 167

to define what elements of a web page should look like. Different HTML pages can then use the
same style sheet to ensure a uniform design. This is the style sheet for the example games:
html, body {
margin: 0;
}
#gameArea {
position: absolute;
}
#mycanvas {
position: absolute;
width: 100%;
height: 100%;
}
Discussing what is possible with style sheets in depth isn't in the scope of this topic, but if you want
to learn more about that, you can read either Beginning CSS Web Development (Apress, 2006) by
Simon Collision or HTML and CSS by Jon Ducket (Wiley, 2011).
In this particular example, you do a couple of things. First, you define that the html and body
elements don't have a margin. That way, the canvas can fully fill the screen if you want it to. Then,
you define that things that are called gameArea and mycanvas are positioned absolutely on the page.
This way, these elements are always placed at their desired position, regardless of what other
elements are in the HTML page. Finally, you indicate that mycanvas has a width and height of 100%
of the screen. As a result, the canvas now fills the entire display of the browser, and it automatically
scales to different resolutions.
Note Having the canvas fill the entire browser display isn't necessarily the best solution for all setups. In
some cases, if might be hard for users to interact with elements on the very edge of their browser window
without accidentally clicking outside the browser. In those cases, you could consider adding a margin.
Setting the Native Game Size
Now that the canvas automatically scales to the size of the browser window, you no longer can use
the canvas resolution as the native game resolution. If you did that, you would have to recalculate
all the game object positions whenever the canvas was resized. A better way to do this is to define
a native game size. Then, when you draw the objects, you scale their position and size such that it
matches the actual canvas size.
The first step is being able to indicate what the native game size should be. You can do this when
you call the Game.start method. You extend this method such that it accepts two extra parameters
to define the width and height of the game, and then call it from the HTML page:
Game.start('gameArea', 'mycanvas', 1440, 1080);