Formatting Text

The default font formatting provided by the fillText and strokeText methods isn’t very aesthetically appealing. Fortunately the canvas API provides properties for formatting text.

Using the font property you can specify:

• font-style
• font-variant
• font-weight
• font-size / line-height
• font-family

For example:

ctx.font = "italic small-caps bold 40px Helvetica, Arial, sans-serif";
ctx.fillText("My text", 20, 50);

Result:

Using the textAlign property you can also change text alignment to either:

• left
• center
• right
• end (same as right)
• start (same as left)

For example:

ctx.textAlign = "center";