3.2. Setting Font Properties

You can set the font of the text that you draw in a canvas with the context’s font property, which is a CSS3 font string consisting of the components in Table 3.1. From top to bottom, the font components in the table are listed in the order you use them for the context’s font property.

Table 3.1. Components of the font property

The default Canvas font is 10px sans-serif. The default values for font-style, font-variant, and font-weight are all normal.

Figure 3.4 shows an application that fills text with different fonts.

Figure 3.4. Specifying fonts

The strings in the application were generated by setting the context’s font property and subsequently printing that property using the context’s fillText() method.