Peter Lubbers - Pro HTML 5 Programming

54
CHAPTER 2 ■ USING THE HTML5 CANVAS API
Both functions take the text as well as the location at which it should be drawn. Optionally, a
maxwidth argument can be provided to constrain the size of the text by automatically shrinking the font
to fit the given size. In addition, a measureText function is available to return a metrics object containing
the width of the given text should it be rendered using the current context settings.
As is the case with all browser text display, the actual appearance of the text is highly configurable
using context properties that are similar to their CSS counterparts, as shown in Table 2-3.
Table 2-3. Possible settings for background pattern repetition
Property Values Note
font CSS font string Example: italic Arial, sans-serif
textAlign start, end, left, right, center Defaults to start
textBaseline top, hanging, middle, alphabetic, ideographic, bottom Defaults to alphabetic
All these context properties can be set to alter the context or accessed to query the current values. In
Listing 2-23, we will create a large text message with the font face Impact and fill it with the background
pattern of our existing bark image. In order to center the text across the top of our canvas, we will declare
a maximum width and a center alignment.
Listing 2-23. Using canvas text
// Draw title text on our canvas
context.save();
// The font will be 60 pixel, Impact face
context.font = "60px impact";
// Use a brown fill for our text
context.fillStyle = '#996600';
// Text can be aligned when displayed
context.textAlign = 'center';
// Draw the text in the middle of the canvas with a max
// width set to center properly
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();
As you can see from the result in Figure 2-17, the trail drawing just got a whole lot—you guessed it—
happier.