HTML5 Canvas: Text

Jakob Jenkov
Last update: 2016-03-03

It is possible to draw text on an HTML5 canvas, using various fonts, sizes and colors.

The look of the text is controlled by these 2D Context font property. In addition you will need to set either the fillStyle or strokeStyle 2D Context property, depending on whether you want to draw filled or stroked text.

To draw the text you use either the fillText() or strokeText() function. The fillText()

Here is a simple code example:

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

context.font      = "normal 36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);

context.font        = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5 Canvas Text", 50, 90);

Here is the result when drawn on a canvas:


HTML5 Canvas not supported

Fonts and Styles

When drawing text on an HTML5 canvas you have to set what font to use. This is done by setting the value of the 2D Context font property. This property is a string with CSS compliant values, of the format:

[font style][font weight][font size][font face]

For instance:

context.font = "normal normal 20px Verdana";

Here are the values you can set for each part of the font string:

font style normal
italic
oblique
inherit
font weightnormal
bold
bolder
lighter
auto
inherit
100
200
300
400
500
600
700
800
900
font size A size in pixels e.g 12px, 20px etc.
font face A font face (family), e.g. verdana, arial, serif, sans-serif, cursive, fantasy, monospace etc.

Note that not all values may be supported by each browser. You will have to test the values you plan to use before relying on them.

Here is another example:

"italic bold 36px Arial"

Drawing Text

When drawing text on an HTML5 canvas you can draw either filled or outlined text, as shown earlier. You do so using the 2D Context functions fillText() and strokeText(). These functions are defined like this:

fillText   (textString, x, y [,maxWidth]);
strokeText (textString, x, y [,maxWidth]);

The textString parameter is the text to draw.

The x and y represents the location where the text is be drawn. The x parameter is where the text starts. The y parameter is where the text is located vertically, but exactly how it is represented depends on the text baseline. The text baseline is covered in a later section.

The maxWidth text is covered in the section below.

Here is a code example:

context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);

Text Max Width

The optional maxWidth parameter tells the canvas that the text cannot take up more space horizontally than the given parameter value. If the text is too wide to fit into the maxWidth, the text is compressed in the width. It is not cut off. Here is a code example that draws the same text with and without maxWidth:

context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.fillText("HTML5 Canvas Text", 50, 100, 200);

Here is what the two texts look like, when drawn on an HTML5 canvas:


HTML5 Canvas not supported

As you can see, the second text is compressed in its width to fit the maxWidth of 200 pixels.

Text Color

The color of either filled or stroked text is set using the fillStyle and strokeStyle properties of the 2D Context, like with any other shape. I will not get into more detail with those properties here. See Stroke and Fill for more details.

Measuring Text Width

The 2D Context object has a function that can measure the width in pixels of a text. It cannot measure the height. The function is called measureText(). Here is a code example:

var textMetrics = context.measureText("measure this");

var width = textMetrics.width;

Measuring the width of a text can be used to calculate if a text string fits into a certain space etc.

Text Baseline

The text baseline determines how the y parameter of the fillText() and strokeText() is interpreted. In other words, where the text is positioned vertically, and how this position is interpreted. Notice, that there might be minor differences in how the browsers interpret this property too.

The text baseline is set using the textBaseline property of the 2D Context. Here are the values it can take, and what they mean:

top The text is aligned based on the top of the tallest glyph in the text.
hanging The text is aligned based on the line the text seems to hang from. This is almost identical to top, and in many cases you cannot see the difference.
middle The text is aligned according to the middle of the text.
alphabetic The bottom of vertically oriented glyphs, e.g. western alphabets like the latin
ideographic The bottom of horizontally oriented glyphs.
bottom The text is aligned based on bottom of the glyph in the text, that extends lowest down in the text.

Here is an example that draws text using the same y value (75) for all texts, but uses a different baseline for each text drawn. A line is drawn a y=75 to show you how the text is baselined around that y value.


HTML5 Canvas not supported

For the curious, here is the code that generates the above graphics:

context.stokeStyle = "#000000";
context.lineWidth  = 1;
context.beginPath();
context.moveTo(  0, 75);
context.lineTo(500, 75);
context.stroke();
context.closePath();

context.font      = "16px Verdana";
context.fillStyle = "#000000";

context.textBaseline = "top";
context.fillText("top", 0, 75);

context.textBaseline = "hanging";
context.fillText("hanging", 40, 75);

context.textBaseline = "middle";
context.fillText("middle", 120, 75);

context.textBaseline = "alphabetic";
context.fillText("alphabetic", 200, 75);

context.textBaseline = "ideographic";
context.fillText("ideographic", 300, 75);

context.textBaseline = "bottom";
context.fillText("bottom-glyph", 400, 75);

Text Alignment

The 2D Context textAlign property defines how the text is aligned horizontally when drawn. In other words, the textAlign property defines how the x coordinate when drawing text.

start The text is drawn just after the x position.
left The text is drawn just after the x position, like start.
center The center of the text is located a the x position.
end The end of the text is located the x position.
right The right edge of the text is located the x position, like end.

Here are a few examples that show how the textAlign property works. The vertical line is drawn at x = 250. All texts are drawn with x = 250 too, but different values for the textAlign property.


HTML5 Canvas not supported

----------

And here is the code that generated the above graphics:

context.stokeStyle = "#000000";
context.lineWidth  = 1;
context.beginPath();
context.moveTo( 250, 0);
context.lineTo( 250, 250);
context.stroke();
context.closePath();

context.font      = "16px Verdana";
context.fillStyle = "#000000";

context.textAlign = "center";
context.fillText("center", 250, 20);

context.textAlign = "start";
context.fillText("start", 250, 40);

context.textAlign = "end";
context.fillText("end", 250, 60);

context.textAlign = "left";
context.fillText("left", 250, 80);

context.textAlign = "right";
context.fillText("right", 250, 100);

Jakob Jenkov

Featured Videos

Java Generics

Java ForkJoinPool

P2P Networks Introduction



















Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next