Game Development Reference
In-Depth Information
In the
changeCanvasColor
function, you first find the
canvas
element. This the HTML document
element on which you can draw 2D and 3D graphics. Having this element ready in your code is
useful, because then you can easily retrieve information about the canvas, such as its width or
height. In order to perform operations on the canvas (such as drawing on it), you need a canvas
context
. The canvas context provides functions for drawing on the canvas. When you retrieve the
canvas context, you need to indicate whether you want to draw in 2 or in 3 dimensions. In this
example, you get a two-dimensional canvas context. You use it to choose a background fill color
and fill the canvas with that color. Figure
1-6
shows the resulting HTML page displayed by the
browser. The following chapters go into more detail about the
canvas
element and how is it used to
create games.
Figure 1-6.
Displaying the HTML5 canvas on a web page and filling it with a color
JavaScript in a Separate File
Instead of writing all the JavaScript code in the HTML document, you can also write JavaScript code
in a separate file and include that file in the HTML document:
<!DOCTYPE html>
<html>
<head>
<title>BasicExample</title>
<script src="BasicExample.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="mycanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
Search WWH ::
Custom Search