HTML5 Canvas: Text Options

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:
 

 

 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 weight	normal 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:

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.

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.

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 textAlignment property defines how the text is aligned horizontally when drawn. In other words, the textAlignment 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 textAlignment property works. The vertical line is drawn at x = 250. All texts are drawn with x = 250 too, but different values for the textAlignment property.

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);