HTML5 Canvas, 2nd Edition

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 set context.textBaseline = 'top'; only once for all the text we are going to display. Also, we change the color using context.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 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