Using Geolocation - HTML5 Foundations - page 275

// Update the font and add the “Joe's Pizza Co." text
ctx.font = “Italic 22px Georgia";
}
9. Add the Joe's Pizza Co. text using the filltext() function. This time you want the text to be
drawn just below the center, so add 25 to the textY variable.
function drawAdvert() {
...
// Add the text styling
ctx.font = “Bold 32px Georgia";
ctx.textAlign = “center";
ctx.fillStyle = “#FFFFFF";
// Calculate the positions for the text
var textX = (adCanvas.width / 2) - 80;
var textY = (adCanvas.height / 2);
// Add the “New York's Best Pizza" text
ctx.fillText(“New York's Best Pizza", textX, textY - 10);
// Update the font and add the “Joe's Pizza Co." text
ctx.font = “Italic 22px Georgia";
ctx.fillText(“Joe's Pizza Co.", textX, textY + 25);
}
10. Save the adscript.js file.
Now open up the advert.html file in your web browser. You should see that the text is positioned just to the left
of the center point on the canvas, as shown in Figure 14-4.
Figure 14-4 Drawing text onto a canvas.
Drawing Lines
The next thing that you need to draw on your canvas is the separator line that goes between the two lines of text
(refer to Figure 14-1).
When using the Canvas API, you can draw lines by creating paths. To create a path, you start with the be-
ginPath() function. A path consists of any number of points. These points are added using the moveTo() and
lineTo() functions.