HTML5: Up and Running

Text

IE[a]	Firefox[b]	Safari	Chrome	Opera	iPhone	Android
7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
[a] Internet Explorer support requires the third-party explorercanvas library. [b] Mozilla Firefox 3.0 support requires a compatibility shim.

In addition to drawing lines on a canvas, you can also draw text on a canvas. Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available: no floats, no margins, no padding, no word wrapping. (Maybe you think that’s a good thing!) You can set a few font attributes, then you pick a point on the canvas and draw your text there.

Figure 4-4. Unlabeled axes drawn on a canvas

The following font attributes are available on the drawing context (see Simple Shapes):

• font can be anything you would put in a CSS font rule. That includes font style, font variant, font weight, font size, line height, and font family.

• textAlign controls text alignment. It is similar (but not identical) to a CSS text-align rule. Possible values are start, end, left, right, and center.

• textBaseline controls where the text is drawn relative to the starting point. Possible values are top, hanging, middle, alphabetic, ideographic, and bottom.

textBaseline is tricky, because text is tricky. (Well, English text isn’t tricky, but you can draw any Unicode character you like on a canvas, and Unicode is tricky.) The HTML5 specification explains the different text baselines:^[5]

The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square (see Figure 4-5 ).

Figure 4-5. Text baselines

For simple alphabets like English, you can safely stick with top, middle, or bottom for the textBaseline property.

Let’s draw some text! Text drawn inside the canvas inherits the font size and style of the <canvas> element itself, but you can override this by setting the font property on the drawing context:

context.font = "bold 12px sans-serif";   
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);

The fillText() method draws the actual text:

context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);   
context.fillText("y", 58, 165);

Ask Professor Markup

Q: Can I use relative font sizes to draw text on a canvas?

A: Yes. Like every other HTML element on your page, the <canvas> element itself has a computed font size based on your page’s CSS rules. If you set the context.font property to a relative font size like 1.5em or 150%, your browser multiplies this by the computed font size of the <canvas> element itself.

For the text in the upper-left corner, say we want the top of the text to be at y=5. But we’re lazy—we don’t want to measure the height of the text and calculate the baseline. Instead, we can set textBaseline to top and pass in the upper-left coordinate of the text’s bounding box:

context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);

Now for the text in the lower-right corner. Let’s say we want the bottom-right corner of the text to be at coordinates (492,370)—just a few pixels away from the bottom-right corner of the canvas—but again, we don’t want to measure the width or height of the text. We can set textAlign to right and textBaseline to bottom, then call fillText() with the bottom-right coordinates of the text’s bounding box:

context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);

Figure 4-6 shows the result.

Figure 4-6. Labeled axes on a canvas

Oops! We forgot the dots in the corners. We’ll see how to draw circles a little later; for now we’ll cheat a little and draw them as rectangles (see Simple Shapes):

context.fillRect(0, 0, 3, 3);   
context.fillRect(497, 372, 3, 3);

And that’s all she wrote! Figure 4-7 shows the final product.

Figure 4-7. A canvas coordinates diagram on a canvas

---

^[5] http://bit.ly/aHCdDO