3.3. Positioning Text

Now that you’ve seen how to stroke and fill text, and set fonts, let’s see how to position text within a canvas.

3.3.1. Horizontal and Vertical Positioning

When you draw text in a canvas with strokeText() or fillText(), you specify the X and Y coordinates of the text; however, exactly where the browser draws the text depends on two context properties: textAlign and textBaseline. Those properties are illustrated in the application shown in Figure 3.5.

Figure 3.5. Text alignment/baseline: Defaults are start and alphabetic, respectively

The filled rectangles in Figure 3.5 depict the X and Y coordinates that the application passed to the fillText() method. Each string displayed by the application shows a combination of the textAlign and textBaseline properties.