Using Geolocation - HTML5 Foundations - page 274

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;
}
6. To calculate the y coordinate, divide the canvas height by 2. Create a variable called textY and initialize it
with the result:
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);
}
7. Now add the New York's Best Pizza text using the fillText() function. You need the text to be
slightly higher than the middle of the canvas, so subtract 10 from the textY variable to get the value for
the y parameter:
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);
}
8. Change the font property to Italic 22px Georgia .
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);