Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

Lesson 1: Drawing by using the element CHAPTER 12 489


The line is drawn as its own path, and then the stroke color is changed to blue, but there is
no need to start a new path because fillText and strokeText create their own path. The fillText
method automatically fills the text without requiring a call to the fill method. The strokeText
automatically outlines the text; in this case, this text overlies the rendered fillText. The result is
shown in Figure 12-18.

FIGURE 12-18 he rendered Hello message showing that the coordinate is at the lower left of the textT

The provided coordinate of 400, 300 is at the lower left of the rendered text, which means
that the default value of the textAlign property is start or left, and the default value of the
textBaseline is bottom. If you change the textAlign property to center and change the text-
Baseline to middle, the text will be centered horizontally and vertically within the canvas, as
shown in Figure 12-19.
Free download pdf