Drawing text

Source code extract:

context.font = "60pt Calibri";

// .. set color, lineWidth, shadow etc.

// 10, 10 is the start of the baseline, bottom of left leg of the "H" in the

// "Hello World" example.

context.fillText("Hello World!", 10, 100);

// Or

context.strokeText("Hello World!", 10, 100);

Properties and methods useful for drawing text

Choosing the font: the context.font property

The font property of the context enables us to specify the font style (plain, bold, italic), the size, and the font name that applies to text we draw in a canvas. Other properties such as strokeStyle or fillStyle, as well as other properties that are detailed in the next pages, are also going to be apply.

The font property accepts values like: font-style,  font-weight, font-size, font-face.

Accepted values are: 

• font-style: normal, italic, oblique

• font-weight: normal, bold, bolder, lighter

• font-size: a size in pixels or in points, such as 60pt, 20px, 36px, etc. 

• font-face:  Arial, Calibri, Times, Courier, etc. Some font faces may not work in all browsers.

Examples: 

• context.font = "60pt Calibri";

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

• context.font = "normal 36px Arial";

• context.font = "italic bold 36px Arial";

Drawing text in solid or wireframe: the fillText() and strokeText() methods

The fillText(message, x, y) and strokeText(message, x, y) methods from the context will actually draw a text message at the origin of the baseline position. In the "Hello World" example, this is located at the bottom of the left leg of the "H".

There is a fourth optional parameter maxWidth that forces the text to fit into a given width, distorting it if necessary:

context.strokeText("Hello World!", x, y [, maxWidth]);

context.fillText("Hello World!", x, y [, maxWidth]);

Forcing a text not to exceed a certain width: the maxWidth property 

Source code extract:

...

context.font = "60pt Calibri";

context.lineWidth = 3;

context.strokeStyle = "blue";

context.fillStyle = "red";

context.fillText("Hello World!", 10, 100);

context.strokeText("Hello World!", 10, 100);

// Draw text with constrained width of 250 pixels

context.fillText("Hello World!", 10, 160, 250);

context.strokeText("Hello World!", 10, 160, 250);

// Constrain width to 150 pixels

context.fillText("Hello World!", 10, 220, 150);

context.strokeText("Hello World!", 10, 220, 150);

Measuring the width of a given text (bounding box) with the ctx.measureText()method

The ctx.measureText() method can be used to get the current width in pixels of a given text, taking into account the diverse properties involved such as font, size, shadow, lineWidth, etc.

Source code extract from this example:

context.font = "60pt Calibri";

context.lineWidth = 3;

context.strokeStyle = "blue";

context.fillStyle = "red";

context.fillText("Hello World!", 10, 100);

context.strokeText("Hello World!", 10, 100);

var textMetrics = context.measureText("Hello World!");

var width = textMetrics.width;

// Draw some text that displays the width of the previous drawn text

context.font = "20pt Arial";

context.fillText("Width of previous text: " + width + "pixels", 10, 150);

// Draw the baseline of the given width

context.moveTo(10, 100);

context.lineTo(width+10, 100);

context.stroke();

Changing the text baseline: the ctx.textbaseline property

The textBaseline property of the context is used to specify the different levels at which one can position the baseline of some given text:

The example above shows the different possible values for this property and the corresponding results. The default value is "alphabetic" and corresponds to what has been used in the previous "Hello World" example.

Possible values:

Typical use (taken from the example above):

context.textBaseline = "top";

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

context.textBaseline = "hanging";

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

context.textBaseline = "middle";

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

Setting the horizontal justification of a text with the textAlign property

The textAlign property of the context tells how the x parameter will be used when calling strokeText("some text", x, y) and fillText("some text", x, y). For example, with textAlign="center", the x parameter gives the position of the vertical center of the text, while in textAlign="right", x corresponds to the rightmost position of the text.