HTML and CSS Reference
In-Depth Information
if (!theCanvas || !theCanvas.getContext) {
return;
}
var context = theCanvas.getContext("2d");
if (!context) {
return;
}
drawScreen();
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);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="200" height="200">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
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.
