Adding text to a canvas element is a fundamental operation in modern web development, enabling dynamic graphics, data visualization, and interactive applications. While the canvas API provides a powerful low-level drawing surface, rendering text requires specific methods and careful consideration of styling options. This guide explores the practical techniques and best practices for drawing text on an HTML canvas, ensuring your typography integrates seamlessly with your visual designs.
Core Methods for Text Rendering
The primary interface for drawing text on a canvas is the CanvasRenderingContext2D API, which exposes two essential methods: fillText() and strokeText() . The fillText() method renders solid, filled text at a specified coordinate, while strokeText() outlines the text with a stroke, creating an outlined effect. To define the position, you provide x and y coordinates, which represent the baseline of the text. Without setting additional properties, the text will appear using the default font, size, and family of the canvas context.
Setting Font Properties
Before drawing text, you must configure the context's font properties to match your design requirements. The font style is controlled via the font property, which accepts a string following the standard CSS font shorthand syntax. This includes defining the size, family, weight, and style in a specific order, such as "16px Arial" or "bold 20px Georgia, serif" . If the font is not loaded or is invalid, the browser will fall back to a default monospace font, which can lead to inconsistent visual results across different environments.
Font Size and Family: Define the core appearance using standard CSS units like px , em , or rem .
Text Style: Apply italic or oblique to create slanted text.
Font Weight: Use keywords like bold , bolder , or numeric values (e.g., 400 , 700 ) to adjust thickness.
Text Alignment and Baseline Control
Beyond font styling, precise text placement is critical for a professional look. The canvas provides two key properties for alignment: textAlign and textBaseline . The textAlign property controls the horizontal alignment of the text relative to the given x-coordinate, with options such as "start" , "end" , "left" , "center" , and "right" . Similarly, textBaseline determines the vertical alignment, allowing you to align text to the top, middle, alphabetic, or hanging baselines, giving you fine-grained control over vertical positioning.
Measuring Text Dimensions
For advanced layouts, such as dynamic resizing or collision detection, you need to know the exact dimensions of your text. The measureText() method returns a TextMetrics object containing the width of the specified text. This is invaluable for creating responsive interfaces or centering text within a defined area. By combining measurement with alignment properties, you can accurately position text blocks without relying on trial and error.
