O'Reilly logo

HTML5: Your visual blueprint™ for designing rich web pages and applications by Adam McDaniel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required