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):
fontcan be anything you would put in a CSSfontrule. That includes font style, font variant, font weight, font size, line height, and font family.textAligncontrols text alignment. It is similar (but not identical) to a CSStext-alignrule. Possible values arestart,end,left,right, andcenter.textBaselinecontrols where the text is drawn relative to the starting point. Possible values aretop,hanging,middle,alphabetic,ideographic, andbottom.
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 ...