HTML5 Canvas, 2nd Edition

Font Size, Face, Weight, and Style Basics

It is very easy to style text that will be rendered on the canvas. It requires you to set the size, weight, style, and font face in a CSS-compliant text string that is applied to the context.font property. The basic format looks like this:

[font style] [font weight] [font size] [font face]

An example might be:

context.font = "italic bold 24px serif";

or:

context.font = "normal lighter 50px cursive";

After the context.font property is set, it will apply to all text that is rendered afterward—until the context.font is set to another CSS-compliant string.