Content: How to draw text on a Canvas element
Text Drawing
You can draw text on a Canvas using the following methods:
1 | // To draw outlined text |
Parameters
- text: The text to be drawn.
- x, y: The coordinates for drawing the text (default at the text’s bottom-left corner).
- maxWidth: Optional, it sets the maximum width for the text.
Setting Font
You can specify the font size and style for text drawing. The default font is “10px sans-serif”.
1 | ctx.font = "40px 'Microsoft YaHei'"; |
Example
1 | var canvas = document.getElementById("canvas"); |
Setting Horizontal Alignment
textAlign Property
This property sets the text alignment relative to the drawing coordinates.
1 | ctx.textAlign = "start"; |
- left
- center
- right
- start (default)
- end
- direction (CSS property, rtf ltr), start and end are related to this:
- If it’s “ltr”, start behaves the same as left.
- If it’s “rtl”, start behaves the same as right.
Setting Vertical Alignment
textBaseline Property
1 | ctx.textBaseline = "top"; |
- top: The text’s baseline is at the text’s top with some distance.
- middle: The text’s baseline is in the middle of the text.
- bottom: The text’s baseline is at the text’s bottom with some distance.
- hanging: The text’s baseline is above the text and sticks to it.
- alphabetic: Default value, the baseline is below the text and crosses through it.
- ideographic: Similar to bottom, but not the same.
Example
1 | function TextDot(canvasId) { |
measureText() for Text Width
1 | var canvas = document.getElementById("canvas"); |
Rotation, translation, and other operations are done in the canvas coordinate system and do not affect previously drawn layers. Subsequent drawings are relative to the modified coordinate system.