Skip to Main Content
HTML5: Up and Running
book

HTML5: Up and Running

by Mark Pilgrim
August 2010
Intermediate to advanced content levelIntermediate to advanced
222 pages
7h 12m
English
O'Reilly Media, Inc.
Content preview from 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.

Unlabeled axes drawn on a canvas

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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

HTML5 in Action

HTML5 in Action

Greg Wanish, Rob Crowther, Joe Lennon, Charles Brindle
HTML5 Cookbook

HTML5 Cookbook

Christopher Schmitt, Kyle Simpson
AngularJS

AngularJS

Shyam Seshadri, Brad Green

Publisher Resources

ISBN: 9781449392154Errata Page