Introduction to HTML5 Canvas - HTML5 Canvas - page 41

The drawScreen() Function

Now we get to drawScreen() . The good news is that we have seen almost all of this be-
fore—there are only a few differences from “Hello World!” For example, we paint multiple
variablesonthescreenusingtheCanvasTextAPI.Weset context.textBaseline = 'top';
only once for all the text we are going to display. Also, we change the color using con-
text.fillStyle , and we change 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 that the user knows he has won.
Here is the full code for the function:

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-Serif" ;
context . fillText ( today , 150 , 10 );
//Message
context . fillStyle = "#FF0000" ;
context . font = "14px Sans-Serif" ;
context . fillText ( message , 125 , 30 ); //Guesses

context . fillStyle = "#109910" ;
context . font = "16px Sans-Serif" ;
context . fillText ( 'Guesses: ' + guesses , 215 , 50 );
//Higher Or Lower
context . fillStyle = "#000000" ;