Canvas Text

HTML Canvas Text

Drawing Text on the Canvas

The HTML Canvas API provides methods to render text directly onto the drawing surface. Key properties and methods for text drawing include:

• font: A string property that defines the font settings, similar to the CSS font property (e.g., ‘20px Arial’, ‘bold 16px sans-serif’). Default is ‘10px sans-serif’.
• fillStyle: Sets the color, gradient, or pattern used to fill the text. Applies to fillText().
• strokeStyle: Sets the color, gradient, or pattern used for the text’s stroke (outline). Applies to strokeText().
• textAlign: Specifies the horizontal alignment of the text relative to the x-coordinate provided in fillText() or strokeText(). Possible values: ‘start’, ‘end’, ‘left’, ‘right’, ‘center’. Default is ‘start’.
• textBaseline: Specifies the vertical alignment of the text relative to the y-coordinate. Possible values: ‘top’, ‘hanging’, ‘middle’, ‘alphabetic’, ‘ideographic’, ‘bottom’. Default is ‘alphabetic’.
• fillText(text, x, y, [maxWidth]): Draws solid (filled) text at coordinates (x, y). Optionally, maxWidth can be provided to constrain the text width, causing it to be compressed or a smaller font used if necessary.
• strokeText(text, x, y, [maxWidth]): Draws the outline of the text at (x, y). Also supports maxWidth.
• measureText(text): Returns a TextMetrics object containing information about the rendered width of the specified text (e.g., metrics.width). This is useful for positioning or layout calculations before drawing.

Using fillText()

This example draws the text “Hello Canvas!” filled with the default color (black).

// HTML: <canvas id="myTextCanvas1" width="300" height="100"></canvas>
const canvasFill = document.getElementById('myTextCanvas1');
const ctxFill = canvasFill.getContext('2d');

ctxFill.font = '30px Arial'; // Set font size and family
ctxFill.fillText('Hello Canvas!', 10, 50); // text, x, y

Using strokeText()

This example draws the outline of the text “Hello Canvas!”.

// HTML: <canvas id="myTextCanvas2" width="300" height="100"></canvas>
const canvasStroke = document.getElementById('myTextCanvas2');
const ctxStroke = canvasStroke.getContext('2d');

ctxStroke.font = '30px Verdana';
ctxStroke.strokeStyle = 'blue'; // Set stroke color
ctxStroke.strokeText('Hello Canvas!', 10, 50);

Adding Color, Alignment, and Centering Text

This example demonstrates how to set text color, change the font, and center the text horizontally and vertically within the canvas.

// HTML: <canvas id="myTextCanvas3" width="400" height="150" style="border:1px solid #ccc;"></canvas>
const canvasCentered = document.getElementById('myTextCanvas3');
const ctxCentered = canvasCentered.getContext('2d');

const text = 'Centered Text!';

// Styling
ctxCentered.font = 'italic bold 24px Comic Sans MS, cursive';
ctxCentered.fillStyle = 'green';

// Alignment
ctxCentered.textAlign = 'center';     // Horizontal center
ctxCentered.textBaseline = 'middle';  // Vertical center

// Calculate center position
const x = canvasCentered.width / 2;
const y = canvasCentered.height / 2;

// Draw the text
ctxCentered.fillText(text, x, y);

// Example of using measureText()
const metrics = ctxCentered.measureText(text);
console.log('Text width:', metrics.width);
// You could use metrics.width to, for example, draw a box around the text.

Application Scenario: Displaying scores in a game, labeling charts and graphs, watermarking images, or creating custom text-based user interface elements.