HTML5: Up and Running

Paths

IE[a]	Firefox	Safari	Chrome	Opera	iPhone	Android
7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
[a] Internet Explorer support requires the third-party explorercanvas library.

Imagine you’re drawing a picture in ink. You don’t want to just dive in and start drawing, because you might make a mistake. Instead, you sketch the lines and curves with a pencil, and once you’re happy with it, you trace over your sketch in ink.

Each canvas has a path. Defining the path is like drawing with a pencil. You can draw whatever you like, but it won’t be part of the finished product until you pick up the quill and trace over your path in ink.

To draw straight lines in pencil, you use the following two methods:

• moveTo(x, y) moves the pencil to the specified starting point.

• lineTo(x, y) draws a line to the specified ending point.

The more you call moveTo() and lineTo(), the bigger the path gets. These are “pencil” methods—you can call them as often as you like, but you won’t see anything on the canvas until you call one of the “ink” methods.

Let’s begin by drawing the off-white grid:

for (var x = 0.5; x < 500; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 375);   
}

for (var y = 0.5; y < 375; y += 10) {
  context.moveTo(0, y);
  context.lineTo(500, y);   
}

Those were all “pencil” methods. Nothing has actually been drawn on the canvas yet. We need an “ink” method to make it permanent:

context.strokeStyle = "#eee";
context.stroke();

stroke() is one of the “ink” methods. It takes the complex path you defined with all those moveTo() and lineTo() calls, and actually draws it on the canvas. The strokeStyle controls the color of the lines. Figure 4-3 shows the result.

Figure 4-3. A grid drawn on a canvas

Ask Professor Markup

Q: Why did you start x and y at 0.5? Why not 0?

A: Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2...) are the edges of the squares. If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line’s direction.

Now let’s draw the horizontal arrow. All the lines and curves on a path are drawn in the same color (or gradient—yes, we’ll get to those soon). We want to draw the arrow in a different color ink—black instead of off-white—so we need to start a new path:

context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);

The vertical arrow looks much the same. Since the vertical arrow is the same color as the horizontal arrow, we do not need to start another new path. The two arrows will be part of the same path:

context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);   
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);

I said these arrows were going to be black, but the strokeStyle is still off-white. (The fillStyle and strokeStyle don’t get reset when you start a new path.) That’s OK, because we’ve just run a series of “pencil” methods. But before we draw it for real, in “ink,” we need to set the strokeStyle to black. Otherwise, these two arrows will be off-white, and we’ll hardly be able to see them! The following lines change the color to black and draw the lines on the canvas:

context.strokeStyle = "#000";
context.stroke();

Figure 4-4 shows the result.