HTML and CSS Reference
In-Depth Information
if (!theCanvas || !theCanvas.getContext) {
var context = theCanvas.getContext("2d");
if (!context) {
function drawScreen() {
context.fillStyle = '#ffaaaa';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#000000';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText ("Canvas!", 0, 0);
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="200" height="200">
Your browser does not support HTML5 Canvas.
This example will do nothing more than place a 200×200 gray box on the canvas and
write “Canvas!” starting at 0 , 0 . We will be replacing the drawScreen() function for most
of the next few examples. Figure 8-1 illustrates Example 8-1 .
Figure 8-1. The basic HTML file for Chapter 8
Next, we will begin to make our Asteroids -like game, which we've named Geo Blaster
Basic . See Figure 8-7 for an example of the final game in action.
Search WWH ::

Custom Search