Capturing User Input - Beginning HTML5 Games with CreateJS - page 43

Text
In your games, you'll often need to provide messaging to the player. Whether as simple as static instructions,
or dynamic text for scoreboards, it is essential that you provide the player with textual feedback. EaselJS comes
bundled with a Text class that allows you to easily draw and manipulate text on the canvas.
Creating Text
Creating text with EaselJS is done by creating a new Text object and optionally passing it some initial values for its
appearance. The following code is an example of how you create a new Text object:
var txt = new createjs.Text("Game Over", "20px Arial", "#ff7700");
Three parameters can be initially passed into the constructor. The first is the text value you want to set to it. The
second is any style you wish to add to the font, such as font family, size, bold, etc. Any valid CSS style for font will be
accepted. You can also use non-system fonts if they are properly embedded into your document. The third is the color
of your font; again, any valid CSS property for color will work.
Since Text is a display object, you can position and add it to the stage like you can with graphics. There are
also a few alignment properties (see Listing 3-12) on Text to help you properly position text on the stage, which is
demonstrated in Figure 3-6 .
Listing 3-12. Using a Text Object to Display a Game Over Message
var txt = new createjs.Text("Game Over", "20px Arial", "#ff7700");
txt.textBaseline = "middle";
txt.textAlign = "center";
txt.x = stage.canvas.width / 2;
txt.y = stage.canvas.height / 2;
stage.addChild(txt);
stage.update();
Figure 3-6. A Game Over message drawn on the screen using a Text object