DRAW TEXT ON THE CANVAS

Drawing canvas text combines the capabilities of CSS fonts with the fill and stroke procedures described earlier in this chapter. Essentially, your font is defined using the same syntax as the CSS font property; this includes the ability to take advantage of @font-face, new in CSS3 and described in Chapter 4, “Styling with CSS3.” The text itself creates a path that can either be filled or stroked.

Start by specifying the font the text will be drawn as:

context.font = 'font-style font-variant font-weight font-size font-family';

All font values are order specific, although not all are required. At a minimum, you must specify font-size and font-family values to properly set a canvas font. All values use the same syntax ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.