HTML Canvas fillText() Method: Drawing Filled Text on a Canvas
The fillText() method in the HTML Canvas API is used to draw filled text on a canvas. It allows you to specify the text content, its x and y coordinates, and optionally, the maximum width for rendering the text. This method is crucial for adding textual elements to your canvas-based graphics and animations. This article will provide a comprehensive understanding of the fillText() method with clear explanations, syntax details, and practical examples.
What is the fillText() Method?
The fillText() method is a core part of the Canvas API, enabling developers to draw text filled with a specific color or pattern onto the canvas. It is used in conjunction with the font and fillStyle properties to control the appearance of the text. Unlike static HTML text, canvas text is part of the pixel grid and can be manipulated using the Canvas API, allowing for more advanced visual effects and animations.
Purpose of the fillText() Method
The primary purpose of the fillText() method is to provide a way to draw textual content directly onto the canvas. It allows you to:
- Render text with a specified font and color.
- Position text precisely at specific coordinates.
- Control the width of the text to fit within a certain area.
- Integrate text seamlessly into canvas-based graphics and animations.
Syntax of the fillText() Method
The fillText() method has the following syntax:
ctx.fillText(text, x, y, maxWidth);
Where:
| Parameter | Type | Description |
|---|---|---|
text |
String | The text string that you want to draw on the canvas. |
x |
Number | The x-coordinate of the starting point of the text. This position is based on the text's baseline. |
y |
Number | The y-coordinate of the starting point of the text. This position is based on the text's baseline. |
maxWidth |
Number (Optional) | The maximum width of the text (in pixels). If the text is wider than this, it will be scaled to fit the given width. This is an optional parameter. |
Note: The x and y coordinates define the position of the text's baseline. The baseline is a conceptual line where most characters rest, excluding the descenders of characters like 'g', 'j', 'p', 'q', and 'y'. ✍️
Basic Examples of fillText()
Let's look at a few examples of using the fillText() method.
Drawing Simple Text
This example demonstrates how to draw basic text on a canvas using fillText()
<canvas id="fillTextCanvas" width="300" height="100" style="border:1px solid black;"></canvas>
<script>
//<![CDATA[
const canvas = document.getElementById('fillTextCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '24px Arial';
ctx.fillStyle = 'blue';
ctx.fillText('Hello, Canvas!', 20, 50);
//]]]]><![CDATA[>
</script>
In this example, the text "Hello, Canvas!" is drawn starting at the coordinates (20, 50), with the font set to 24px Arial and the fill color to blue.
Setting Font and Fill Style
This example illustrates how to use font and fill styles with fillText().
<canvas
id="fillStyleCanvas"
width="300"
height="100"
style="border: 1px solid black;"
></canvas>
<script>
//<![CDATA[
const canvas_font_fill = document.getElementById("fillStyleCanvas");
const ctx_font_fill = canvas_font_fill.getContext("2d");
ctx_font_fill.font = "30px Times New Roman";
ctx_font_fill.fillStyle = "green";
ctx_font_fill.fillText("Styled Text", 50, 70);
//]]]]><![CDATA[>
</script>
Here, we use a different font (30px Times New Roman) and fill color (green) for the text.
Using maxWidth
The maxWidth parameter allows you to control the width of the rendered text. If the text exceeds this width, it will be scaled down to fit.
<canvas
id="maxWidthCanvas"
width="300"
height="100"
style="border: 1px solid black;"
></canvas>
<script>
//<![CDATA[
const canvas_max_width = document.getElementById("maxWidthCanvas");
const ctx_max_width = canvas_max_width.getContext("2d");
ctx_max_width.font = "20px Arial";
ctx_max_width.fillStyle = "red";
ctx_max_width.fillText(
"This is a long text that will be scaled down.",
10,
50,
280
);
//]]]]><![CDATA[>
</script>
In this example, the text is scaled to fit within a width of 280 pixels.
Advanced Usage of fillText()
Let's dive into some advanced techniques of using fillText().
Combining Text with Other Shapes
The following example demonstrates how to integrate text with other shapes on the canvas.
<canvas
id="combinedCanvas"
width="300"
height="200"
style="border: 1px solid black;"
></canvas>
<script>
//<![CDATA[
const canvas_combined = document.getElementById("combinedCanvas");
const ctx_combined = canvas_combined.getContext("2d");
// Draw a rectangle
ctx_combined.fillStyle = "lightblue";
ctx_combined.fillRect(20, 20, 260, 150);
// Draw text
ctx_combined.font = "28px Arial";
ctx_combined.fillStyle = "black";
ctx_combined.fillText("Text on Rectangle", 40, 100);
//]]]]><![CDATA[>
</script>
In this example, we first draw a filled rectangle and then draw text on top of it. This technique allows for creating visually layered compositions.
Text with Different Styles
It's possible to apply different styles to different parts of text by using multiple fillText() calls and changing the fillStyle or font properties before calling each.
<canvas id="multiStyleCanvas" width="300" height="100" style="border:1px solid black;"></canvas>
<script>
//<![CDATA[
const canvas_multi_style = document.getElementById('multiStyleCanvas');
const ctx_multi_style = canvas_multi_style.getContext('2d');
ctx_multi_style.font = '20px Arial';
ctx_multi_style.fillStyle = 'red';
ctx_multi_style.fillText('Multi', 20, 50);
ctx_multi_style.font = '30px Times New Roman';
ctx_multi_style.fillStyle = 'blue';
ctx_multi_style.fillText('Style', 70, 70);
ctx_multi_style.font = '20px Arial';
ctx_multi_style.fillStyle = 'green';
ctx_multi_style.fillText('Text', 140, 50);
//]]]]><
