HTML5 Canvas, 2nd Edition

Jumping to Full Screen

The changes to HTML and CSS necessary to jump to full screen are almost identical to those for the BSBingo game. The one change we have made is to create this game at a 480×320 aspect ratio that will scale more evenly to various device sizes in landscape mode.

Canvas element

We will be using the following HTML Canvas element code:

<div style="top: 0px; left: 0px; height: 100%; width: 100%;">
<canvas id="canvas" width="480" height="320" >
 Your browser does not support the HTML 5 Canvas.
</canvas>

Notice that we have moved the DIV element that holds the game from the GeoBlaster Extended 50x, 50y starting point to 0,0, using the top and left style attributes.

Meta-tags

We also need to add in a set of meta-tags for Mobile Safari that will aid in informing the device to run the application at full screen when the Home Screen icon is clicked.

<meta name="viewport" content="initial-scale=1 maximum-scale=1
      user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes">
<link rel="apple-touch-icon" href="icon.png" >

Also note that we have added the icon.png image as the referenced Home Screen icon when the user adds the game to their Home screen from the website.

Style sheets

Next we need to add in the same style attributes for the canvas that we did with the BSBingo game:

<style type="text/css">
        html, body {
            background-color: #2f9acc;
            margin: 0px;
            padding: 0px;
            color: #fff;
              height: 100%;
              overflow: hidden;
        }