HTML5 Canvas: Beginner Tutorial Chapter 4 - Write Text on Canvas

In this HTML 5 Canvas Tutorial, so far, we talked about how to integrate the Canvas element into a website, how to draw lines, rectangles, squares and circles on it and how to adjust and modify them with colors. In this part, we will see how to output some text on the HTML 5 Canvas.

• Chapter 1: Introduction and Basics
• Chapter 2: Drawing Lines
• Chapter 3: Rectangles and Circles
• Chapter 4: Write Text on Canvas

I recommend reading the first chapter of this tutorial, if you have never worked with the HTML5 Canvas before.

Writing Text on HTML5 Canvas

In this example, we can see how to write a text onto the canvas.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
  
context.font = "20px Verdana";      // Font Style
context.fillText("ABC", 100, 100);  // Text, x, y

For this, we need nothing more than the property font and the method fillText().

Using font, we can define which font and which font size should be used for our text.

The method fillText will then write the text onto the canvas. As a first parameter, we are passing the text, we would like to write ("ABC" in the example). As second and third parameter, we have to specify the position (here we are using the point 100/100 on the canvas).

With using strokeText() instead of fillText(), it is possible to only draw the border of the text.

Align Text

Using textAlign and textBaseline, you can align our text horizontally and vertically. Depending on how textAlign and textBaseline is set, the passed coordinates X and Y are referring to another position.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
   
context.font = "20px Verdana";      // Font Style
context.textAlign = "center";       // horizontally centered
context.textBaseline = "middle";    // vertically centered
context.fillText("ABC", 100, 100);  // Text, x, y

In this example, we are centering the text horizontal and vertical. This means, the position 100/100 should be located exactly in the middle or center of the text and the text will be written centered on this point.

Other values for textAlign are "right" and "left", adjusting the text right-justified or left-justified.

Other values for textBaseline are "top" (Y position is at the upper edge), "bottom" (Y position is at the lower edge), "alphabetic" (Y position is at the baseline) and "hanging" (Y position is at the surface).

Measure Text Width

In general, the properties textBaseline and textAlign take us from the work calculating how the text should be placed with an own calculation. Nevertheless, in some cases it is necessary to know how height or width our text is.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.font = "20px Verdana";             // Font Style
var w = context.measureText("ABC").width;  // Width

With using measureText().width, it is possible to determine the width of the passed text. Of course, you should take into account to set the Font Style with font before using this function, in order to ensure. By the way, the height of the text is the 20px specification in this example.