Introduction to HTML5 Canvas - HTML5 Canvas - page 21

if (guessIndex < 0) {
higherOrLower = "That is not a letter";
} else if (guessIndex > letterIndex) {
higherOrLower = "Lower";
} else {
higherOrLower = "Higher";
}
}
drawScreen();
}
}
The drawScreen() Function
Now we get to drawScreen() . The good news is that we have seen almost all of this
before—there are only a few differences from “Hello World!” For example, we paint
multiple variables on the screen using the Canvas Text API. We only set context.text
Baseline = 'top'; once for all the text we are going to display. Also, we change the
color using context.fillStyle , and the font with context.font .
The most interesting thing we display here is the content of the lettersGuessed array.
On the canvas, the array is printed as a set of comma-separated values, like this:
Letters Guessed: p,h,a,d
To print this value, all we do is use the toString() method of the lettersGuessed array,
which prints out the values of an array as—you guessed it—comma-separated values:
context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);
We also test the gameOver variable. If it is true , we put You Got It! on the screen in giant
40px text so the user knows he has won.
Here is the full code for the function:
function drawScreen() {
//Background
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, 500, 300);
//Box
context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);
context.textBaseline = "top";
//Date
context.fillStyle = "#000000";
context.font = "10px _sans";
context.fillText (today, 150 ,10);
//Message
context.fillStyle = "#FF0000";
context.font = "14px _sans";
context.fillText (message, 125, 30);