html5<text>,HTML5 Canvas: Text

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