Learn how to add text to your HTML5 Canvas using JavaScript. Understand the fillText() and strokeText() methods, and explore text styling options for creative projects.
The HTML5 Canvas is a powerful tool for creating graphics and animations directly in the browser. One of the exciting features of the Canvas API is the ability to add text to your drawings. Whether you’re building a game, designing a digital poster, or simply experimenting with graphics, knowing how to render text on the Canvas is essential. In this section, we’ll explore how to use JavaScript to draw text on the Canvas, customize its appearance, and create engaging visual effects.
To draw text on the Canvas, we use the CanvasRenderingContext2D interface, which provides two primary methods for rendering text: fillText() and strokeText(). These methods allow you to draw filled and outlined text, respectively.
fillText() MethodThe fillText() method is used to draw filled text on the Canvas. Here’s the basic syntax:
ctx.fillText(text, x, y);
Here’s a simple example of using fillText():
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = '#000000';
ctx.fillText('Hello Canvas!', 50, 50);
In this example, we set the font size and style using ctx.font, choose a fill color with ctx.fillStyle, and then draw the text “Hello Canvas!” at the coordinates (50, 50).
strokeText() MethodThe strokeText() method is similar to fillText(), but it draws only the outline of the text. This can be useful for creating effects or when you want the text to stand out against a filled background.
ctx.strokeText(text, x, y);
Here’s how you might use strokeText():
ctx.font = '30px Arial';
ctx.strokeStyle = '#FF0000';
ctx.strokeText('Outline Text', 50, 100);
The Canvas API provides several properties that allow you to customize the appearance of your text:
ctx.font: Sets the current text style, including font size and family (e.g., '30px Arial').ctx.fillStyle: Sets the color used to fill the text.ctx.strokeStyle: Sets the color used for the text outline.ctx.textAlign: Defines the text alignment relative to the x-coordinate. Options include 'left', 'right', 'center', 'start', and 'end'.ctx.textBaseline: Specifies the vertical alignment of the text. Options include 'top', 'hanging', 'middle', 'alphabetic', 'ideographic', and 'bottom'.Here’s an example demonstrating some of these properties:
ctx.font = '40px Comic Sans MS';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#008080';
ctx.fillText('Centered Text', canvas.width / 2, canvas.height / 2);
In this example, the text is centered both horizontally and vertically on the canvas.
Let’s put these concepts into practice with a fun activity. Your task is to write your name or a favorite quote on the Canvas and experiment with different fonts, sizes, and colors.
<canvas> element.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Text Example</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas>
<script src="canvasText.js"></script>
</body>
</html>
canvasText.js file and add the following code:const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Customize your text
ctx.font = '50px Georgia';
ctx.fillStyle = '#FF5733';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Draw your name or quote
ctx.fillText('Your Name Here', canvas.width / 2, canvas.height / 2);
Adding text to the Canvas is a versatile feature that enhances the interactivity and visual appeal of your web projects. By mastering the fillText() and strokeText() methods, along with text styling properties, you can create dynamic and engaging graphics. Whether you’re crafting a simple greeting or building a complex game interface, the ability to render text on the Canvas opens up a world of creative possibilities.