HTML5 Canvas

Home / Topic / HTML5 Canvas / Adding Text to the Canvas

Adding Text to the Canvas

In games, displaying visual information such as scores, messages, or instructions is essential. The Canvas API allows us to easily add and customize text. In this chapter, we will learn how to use the fillText and strokeText methods to draw text on the canvas and explore how to customize the style and alignment of text.

Drawing Text with `fillText`

To add text to the canvas, we use the fillText method, which allows us to draw solid text. This method takes three main parameters: the text, the x coordinate, and the y coordinate where the text will appear. Here's a basic example:

javascript

"First, we set the font to 20 pixels with Arial typeface. Then, we assign the color black to the text via fillStyle and finally draw the text at the coordinates 100,100 using fillText."

In this example, the text "Hello, Canvas!" is drawn at position (100, 100) with a font size of 20px and Arial text style. You can change the font and color to customize the text according to your game style.

Drawing Text Outlines with `strokeText`

If we want to draw only the outline of the text, we can use the strokeText method. This can be useful for creating text effects or highlighting words on the canvas. Let's look at an example:

javascript

"Here, we define the font as 30 pixels in Verdana and set the outline color to blue with strokeStyle. Then, we use strokeText to draw only the outline of the text at the coordinates 150,150."

In this case, the text appears with a blue outline instead of being filled, which can be useful for text styles that stand out more in the game.

Setting Font Style and Size

The font property allows us to customize the style and size of the text. We can specify both the font size and the type in a single value. Here are some style examples:

javascript

"In these examples, we use varied font styles. First, we set the font to 24 pixels in bold Courier and green color. Then, we apply italic text with a 20-pixel font in Times New Roman and purple color. This shows how we can experiment with text styles."

These examples demonstrate how to change the style, size, and font of text on the canvas. Using different fonts can enhance the appearance of text elements in the game.

Text Alignment and Positioning

Text alignment on the canvas is managed by the textAlign property, which defines how the text will be aligned in relation to the specified (x, y) point. Possible values include "start", "end", "left", "right", and "center". Here are examples:

javascript

"First, we set the text alignment to 'center' to center it at the given x,y point. We draw the text in the center of the canvas at the 300 y position. Then, we change the alignment to 'right' and place the text aligned to the right of the canvas at the 350 y position."

These examples show how to use textAlign to control the horizontal alignment of text, which is useful for centering text or adjusting it to the sides of the canvas.

Line Height and Text Baseline

We can control the line height of text using textBaseline, which defines the text baseline relative to the (x, y) point. Common values include "top", "hanging", "middle", "alphabetic", "ideographic", and "bottom". Here is an example:

javascript

"First, we set textBaseline to 'top' so that the text is drawn with its upper part aligned to the specified y point. Then we change it to 'bottom' to align the base of the text with the y point, to see how the height adjusts on the canvas."

The textBaseline property allows us to adjust the vertical position of the text to better fit the design of our game.

Complete Example: Displaying a Score

Let's imagine we are developing a game and want to display a score in the upper left corner of the canvas. We can do this using fillText and customizing the font, color, and position:

javascript

"In this example, we set the text to display the score in the upper left corner of the canvas. We use an 18-pixel font in Arial, white color, and left alignment. This will be useful for displaying scores or any other indicator in the game."

This code displays an initial score of 0 in the upper left corner of the canvas, something common in many games.

Summary

In this chapter, we explored how to add and customize text on the canvas. We learned to use the fillText and strokeText methods, and also to adjust the style, size, alignment, and position of the text. These concepts will be fundamental for displaying visual information in our game.

Back to previous chapter

Mark as read and continue

Ask me anything