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 CSSfont 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 CSStext-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:

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: