The Memory (aka Concentration) Game - The Essential Guide to HTML5 - page 150

Figure 5-9. Text in different fonts drawn on the canvas, produced using the font and fillText functions

Caution: Make sure you pick fonts that will be present on the computers of all your players. In
Chapter 10 youll learn how to use a CSS feature, called font-family, that provides a systematic way
to specify a primary font and backups.

Note that although what you see appears to be text, youre actually looking at ink on the canvas—that is,
bitmap images of text, not a text field that you can modify in place. This means that to change the text, we
need to write code that will completely erase the current image. We do so by setting the fillStyle to the
value we placed in the variable tablecolor earlier, and use fillRect at the appropriate location and with
the necessary dimensions.
After creating the text image, the next step is to set fillStyle to a color other than tablecolor . Well
use the color we chose for the card backs. For the opening screen display of the photograph memory
game, heres the code to set the font used for all text:
ctx.font="bold 20pt sans-serif";
Using the sans-serif font makes sense, since its a standard font present on any computer.

Putting together what weve done to this point, heres the code to display the number of matches at a
particular point in the game:
ctx.fillStyle= tablecolor;
ctx.fillRect(10,340,900,100);

ctx.fillStyle=backcolor;
ctx.fillText

("Number of matches so far: "+String(count),10,360);