Drawing Text
The canvas context provides two methods for rendering text, allowing you to draw solid or outlined characters directly onto the canvas.
| Method | Description |
|---|---|
fillText(text, x, y, maxWidth) |
Draws solid text at (x,y) with an optional maxWidth constraint. |
strokeText(text, x, y, maxWidth) |
Draws the outline of text at (x,y) with an optional maxWidth constraint. |
Text Styles
To customize the appearance and alignment of text, adjust these properties:
| Property | Description |
|---|---|
font |
Sets the font style, size, and family (e.g., "bold 24px Arial"). Uses the same syntax as the CSS font property. |
textAlign |
Sets the horizontal alignment of text (start, end, left, right, or center). |
textBaseline |
Sets the vertical alignment baseline (top, hanging, middle, alphabetic, ideographic, or bottom). |
direction |
Sets the text direction (ltr, rtl, or inherit). |
Text Example
This example demonstrates how to set different font styles and draw both filled and outlined text:
The next lesson explains how to implement images on the canvas.