Mario Andres Pagella [Mario Andres Pagella] - Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

You need to specify the width and height attributes inside the canvas tag. Even though you can force canvas to a certain width and height with CSS, when you reference the object using JavaScript, it will return the default size (300150 pixels), completely overriding any values that you may have assigned via CSS. However, you can modify the width and height of an HTML Canvas object dynamically in JavaScript.

In order to start using the HTML5 Canvas API, we just need to reference the canvas tag by using its id attribute value (myCanvas), which will allow us to get a reference to the 2D drawing context. (The 3D Context is WebGL, which is not covered in this book.)

window.onload = function () { var canvas = document.getElementById('game'); var c = canvas.getContext('2d');}

Alternatively, you can create an HTML5 Canvas object dynamically:

window.onload = function () { var canvas = document.createElement('canvas'); var c = canvas.getContext('2d');}

In the previous example code, the reference to the 2D drawing context is stored in the c variable (in many other examples, this variable might be called ctx). All further calls to the canvas API will be done through this variable. As an initial example, were going to work on the very first thing that users will see when they load our game: The Title Screen . Later on, were going to extend it to support the preloading of resources such as images or sounds.

Our title screen, which will be displayed throughout the entire browser window, will consist of an image showing the logo of our game and a text below it with the phrase Click or tap the screen to start the game. When you click on the browser window, the title screen will smoothly fade to white.

In order to get started with this, we need to add the basic HTML code that will support the game. In most cases, the page is going to look like a conventional HTML5 page:

Example 1 - Title Screen // Javascript code goes here html { height: 100%; overflow: hidden } body { margin: 0px; padding: 0px; height: 100%; } Your browser doesn't include support for the canvas tag.

The small CSS block in the previous code allows us to force the page to be 100 percent of the height of the window, and overflow: hidden prevents vertical and horizontal scrollbars from showing up if we exceed the visible area on the screen.

Now that our page template is complete, we can start using the HTML5 Canvas API by adding the following JavaScript code inside the tag of our page:

window.onload = function () { var canvas = document.getElementById('game'); // Force canvas to dynamically change its size to // the same width/height as the browser window canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; var c = canvas.getContext('2d'); // Fill the screen with a black background c.fillStyle = '#000000'; c.fillRect (0, 0, canvas.width, canvas.height); var phrase = "Click or tap the screen to start the game"; c.font = 'bold 16px Arial, sans-serif'; c.fillStyle = '#FFFFFF'; c.fillText (phrase, 10, 30);}

Lets go through this code step by step.

When we added the canvas tag to the HTML code, we defined the height and the width attributes with the value 100, meaning that the canvas should be 100 pixels tall and 100 pixels wide. However, we wanted our title screen to be as tall and wide as the browser window, which is why we needed to override those two values dynamically by using document.body.clientWidth to indicate the width and document.body.clientHeight to indicate the height.

After we get a reference to the 2D context, we make a call to an HTML5 Canvas API function called fillStyle(). At the beginning of this chapter, we made a comparison of the canvas to a piece of paper with crayons of different colors; this is the same scenario. What the fillStyle() call is doing is to set the color to black, and after that it draws a filled rectangle starting at position (0,0) and ending at position (canvas.width, canvas.height), thus covering the entire browser window. (Remember that we set a new size for the canvas object in the last step.)

Then it sets the phrase that were going to use, selects a font family (in this case, Arial with a fallback to sans-serif, which works exactly as in CSS) and size, and changes the color again, this time to white. The fillText() call prints the phrase on the position 10, 30 (10 pixels starting on the left, 30 pixels starting on the top).

shows the result of that code.