HTML5 Canvas: Text
Jakob Jenkov |
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 | normalitalicobliqueinherit |
| font weight | normalboldbolderlighterautoinherit100200300400500600700800900 |
| 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. 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.
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.
----------
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);
| Tweet | |
Jakob Jenkov | |
