Getting Started with the HTML5 Canvas — Part 5

9 min readApr 9, 2020

Adding Text

Introduction

Adding text to an HTML5 canvas drawing is very easy, but there are a couple of situations to watch out for. In this article (part 5 of my series on the HTML5 canvas), I’ll show you some ways to add and format text.

If you’re new to the Canvas, check out the links to the other parts of this series, which I have included at the end of this article.

Starting Point

To begin working with text, we’ll start with the ending point from the previous part of this series.

Starting code.

There are two methods used to add text to a drawing:

fillText()
strokeText()

The fillText() method adds solid-colored text to a drawing. The strokeText() method adds text as an outline with no fill. You can also combine these two methods to create text that has a fill of one color and a stroke of another color.

Update the fill and stroke colors using the fillStyle and strokeStyle properties, respectively.

Let’s update our drawing to add some text, starting with adding some filled text.

Adding Text to a Drawing using the fillText() Method

To try out the fillText() method, let’s add a quote to the top of our drawing. Here is the updated code:

Adding a quote to our drawing.

Here’s what our image looks like, after adding the text to it:

Quote text added to the top-left area of the sky.

Here is what the new lines of code do:

Line 26 — context.beginPath();— Start a new object on the drawing.
Line 27 — context.fillText(“A sailor’s joys are as simple as a child’s.”, 5, 20); — Creates text to be added to the drawing. The text between the quotation marks is the text to be placed on the drawing. The second value (5) is the x-position of the text. The last value (20) is the y-position of the text.
Line 28 — context.fill(); — Tells the browser to draw the text.

By default, the fillText() method adds black san-serif 10px text to a drawing. We can use the font property to change the appearance of the text. Let’s try changing the font of our quote.

Changing the Font of Text

Before we change the font of our text, I want you to be aware of a few things that can cause you issues if you don’t do these correctly.

First, the font property definition must come before the fillText() (or strokeText()) method that it applies to. If you place the font property after the fillText() method, the font of the text will not be changed.

Second, the font property has seven different values that can be specified. The values are:

Font Style (normal, italic, oblique)
Font Variant (normal, none, small-caps, etc.)
Font Weight (normal, bold, lighter, bolder, value between 1 and 1000)
Font Stretch (normal, condensed, expanded, %)
Font Size
Line Height
Font Family (serif, sans-serif, {font name})

Font property values must appear in the order listed above, or they will not be applied to the text. If you do not want to specify one of the property values, leave it out.

Lastly, if you use the font property, you must include values for the font size and family. If you do not include both of these values, the font will not be applied to your text.

One more thing to be aware of is that you can specify more than one font family. Each font family is separated by a comma within the font property value list.

The ability to specify multiple font families is a good thing. When the text is rendered, if the first font family is available on the device, it will be used. If the first font family is not available, the browser will try to use the next font family specified. Including more than one font family creates fallback options for the display device.

Here’s an example of using several font families:

context.font = “16px Helvetica, Arial, sans-serif”;

I also want to mention that if you use a font family name that is more than one word, you will want to include the name in quotation marks. For example, if you want to use Times New Roman, include it in quotes. For example:

context.font = “16px ‘Times New Roman’”;

Let’s update our text with a font that it is easier to read:

Updating quote font.

Here’s what our new code does:

Line 27 — context.font = “16px serif”; — Changes font size to 16px and font family to “serif”.

Setting quote font for better readability.

Add Outlined Text to Drawing

Adding outline text to a drawing is the same as adding filled text. The only difference is that we use the strokeText() method instead of the fillText() method. Let’s add some outlined text to our drawing by adding “USA” to our sailboat’s sail:

Add stroke (outline) text to the drawing.

Here’s what our updated code does:

Line 68 — context.beginPath(); — Start a new object on the drawing.
Line 69 — context.font = “700 20px sans-serif”; — Set font of text to: 1.) Weight = 700 (make it bold), 2.) Size = 20px, and 3.) Family = sans-serif.
Line 70 — context.strokeStyle = “blue”; — Set the text stroke (outline) to blue.
Line 71 — context.strokeText(“USA”, 167, 250); — Set the text to “USA” and position it at coordinates 167 (x) and 250 (y).
Line 72 — stroke(); — Draw the text.

Here’s what our image looks like now:

Add stroke (outline) text to the drawing.

SAIL TEXT — USA IMAGE

Using fillText() and strokeText() Together

In addition to using the fillText() and strokeText() methods separately, you can also use them together. For instance, you might want some text that uses one color for the fill but another color for the outline. Let’s try this out.

Adding stroke and fill text to the drawing.

For this example, we made the font size huge so that you could see the effect. I also changed the size of our “USA” from 20px to 15px. In the next example, I will change the “76” to 12px, so that it fits better on the sail.

Here’s what our new code does:

Line 75 — context.beginPath(); — Start a new object on the drawing.
Line 76 — context.font = “100 120px serif; — Set text font to 1.) light (100), 2.) 120px, and 3.) serif font family.
Line 77 — context.fillStyle = “red”; — Set fill of the text to the color red.
Line 78 — context.strokeStyle = “black”; — Set the outline (stroke) of the text to the color black.
Line 79 — context.fillText(“76”, 202, 250); — Sets the filled text value to “76”, the x-position to 202, and the y-position to 250.
Line 80 — context.stroekText(“76”, 202, 250); — Sets the outline text value to “75”, the x-position to 202, and the y-position to 250.
Line 81 — context.fill(); — Draws the fill of the object.
Line 82 — context.stroke(); — Draws the stroke of the object.

Here’s what our drawing looks like now:

Now that you know how to add text to your drawing. Let’s take a look at a couple of other properties available to you when working with text. These are a couple of additional options for how your text is aligned using the textAlign and textBaseline properties. We’ll take a look at these properties in the following sections.

Aligning Text

In many cases, you won’t need to worry about aligning the text you are placing on the canvas. You can simply place the text using the coordinates that put it in the proper location.

There may be times, however, when you’ll want your text to be aligned a certain way with (or within) another object on the drawing. To accomplish this, we can use the textAlign property. The textAlign property has the following options:

left — x-position is to the left of the text.
right — x-position is to the right of the text.
center — x-position is in the middle of the text.
start — same as left, x-position is to the left of the text.
end — same as right, x-position is to the right of the text.

To see how the textAlign property affects text, we can place a vertical line at x-coordinate of our text. Then we can try using the various textAlign property values to see how the placement of the text changes.

If we want to add some text to our burgee and we want the text to be centered on the burgee, we place the x-coordinate in the middle of the flag, then use textAlign = center to get the text in the right position. Here’s our updated code:

Center aligning text on the burgee.

Here is the line that sets the alignment of the text:

Line 105 — context.textAlign = “center”;

To illustrate that the text is centered, I have also added some code to display a line on the burgee temporarily. Here’s the code that adds the line:

Line 99 — context.moveTo(130, 108);
Line 100 — context.lineTo(130, 148);
Line 101 — context.stroke();

Note: Once you see how the textAlign properties affect the image, you can take out the three lines of code above (99–101).

Here’s what the image looks like:

There is another option for text placement. Let’s look at the textBaseline property.

Setting the Baseline of Your Text

The textBaseline property determines where your text is placed compared to the y-coordinate of your text.

To see how the textBaseline property affects text, we can place a horizontal line on our drawing and then change the textBaseline property to see what each property does.

Here are the possible textBaseline property values:

top — y-position is above the text.
bottom — y-position is below the text, with a little additional space between the text and the line.
middle — y-position is in the middle of the text, horizontally.
alphabetic — the text sits directly on the y-position line.
hanging — the text hangs below the y-position, this is slightly higher than the top value, the top of the text overlaps with the y-position.

To try out the textBaseline property, let’s add a horizontal line to the center of our burgee. Then, if we set the text’s y-position to the same y-position as the line and the textBaseline property to “middle,” our text will be centered horizontally on the flag. Here’s our updated code:

Trying out the textBaseline property.

Here’s what our code accomplished:

Line 107 — context.textBaseline = “middle”; — Places the middle of the text on the y-position of the text.

We added some temporary code to add a horizontal line to the image:

Line 99 — context.moveTo(110, 125); — Starting position of the line.
Line 100 — context.lineTo(160, 125); — Draws the line to x-position 160, y-position 125.
Line 101 — context.strokeStyle = “black”; — Sets the line stroke color to black.
Line 102 — context.stroke(); — Draws the line on the canvas.

Here’s how our drawing looks: