Canvas elements are accessible through the DOM just like any other HTML element. However, each canvas element exposes one or more drawing contexts that can be used to draw on the canvas in various ways.
At the moment the only context specified in the standard and supported by browsers is the 2-dimensional (or 2d) context.
The 2d context exposes an impressive API for drawing lines, curves, shapes, text, and so forth on the canvas element. Each canvas has a coordinate system with the origin (0, 0) in the upper left corner. The 2d drawing context uses an imaginary pen metaphor for its basic drawing functions, so the commands to draw on the canvas are something like, “Move the pen to these coordinates, then draw this thing.” In addition, drawing things and filling them in or stroking them are separate concepts and are carried out by separate commands. When you first draw a path, it is not shown on the screen—you must apply a fill or stroke to make it visible. This is for efficiency, because this way you can draw a complex path consisting of many parts, and then stroke or fill the entire thing at once.
To get started, draw a simple line. The syntax for this is quite straightforward, as demonstrated in Listing 4-1.
Listing 4-1. The Basic Drawing Syntax for canvas
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
<style>
<canvas id="myCanvas"></canvas>
<script>
This example has a basic canvas element on the page. It uses CSS to give the canvas dimensions and a border so you can see it. The script gets a reference to the canvas element and then uses that reference to get the drawing context. It then uses the moveTo method to move the pen to the upper left corner of the canvas, and then instructs the context to draw a line (as a path) to the lower right corner at (200, 200). Last, it sets the stroke style to black and instructs the context to stroke the path.
You expected the line to go from 0, 0 to 200, 200 . . . and actually it did. The default size for a canvas element is 200 pixels high by 400 pixels wide. You used CSS to specify the dimensions of the canvas, which just made the canvas adjust its aspect ratio rather than actually reduce its default width. This brings us to an important detail: in a canvas, the coordinate system does not necessarily correspond with screen pixels.
This is a common mistake with canvases, and it happens because we’re all trained to use CSS to change the appearance of HTML elements. In the case of the canvas element, though, you need to specify its dimensions using its width and height properties. Listing 4-2 adds those to the markup.
Listing 4-2. Specifying the Width and Height for a Canvas Element
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var myCanvas = document.getElementById('myCanvas');
var myContext = myCanvas.getContext('2d');
myContext.moveTo(0, 0);
myContext.lineTo(200, 200);
myContext.strokeStyle = '#000';
myContext.stroke();
</script>
</body>
</html>
Figure 4-1. The results of Listing 4-1
The results shown in Figure 4-1 are somewhat unexpected.
As you can see, this removed the width and height declarations from the CSS rule and instead directly applied the dimensions to the canvas element using the width and height properties. Then it drew and stroked the path, and the results were as expected, as shown in Figure 4-2.
Figure 4-2. Small victories
As you can see, the canvas is now truly 200 pixels by 200 pixels, and your line draws exactly as you expected.
The canvas tag is not self-closing, so the closing tag is mandatory. You can include alternate content inside of the canvas tag, which will render if the browser does not support the canvas element.
You can easily extend this simple example to include some alternate content for older browsers, as shown in Listing 4-3.
Listing 4-3. Alternate Content for Browsers That Don’t Support Canvas
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">Did You Know: Every time you use a browser that doesn't support HTML5, somewhere a kitten cries. Be nice to kittens, upgrade your browser!
</canvas>
<script>
var myCanvas = document.getElementById('myCanvas');
var myContext = myCanvas.getContext('2d');
myContext.moveTo(0, 0);
myContext.lineTo(200, 200);
myContext.strokeStyle = '#000';
myContext.stroke();
</script>
</body>
</html>
As you can see, we should all think of the kittens.
Now that you have a basic idea of the canvas tag and the drawing context, you’ll dive into the available drawing commands.