Text Styling with HTML Canvas

In the post titled, “Beginning HTML5 Canvas”, we had a brief introduction to HTML5 Canvas. WHATWG defines an HTML5 Canvas as “a resolution dependent bitmap canvas, which can be used for rendering graphs, game graphics or other visual images on the fly”. The native support for 2D HTML5 Canvas is available in Firefox 3+, IE9+, Safari 3+, Chrome 3+ and Opera 10+. Among the mobile based browsers IPhone 1+ and Android 1+ support Canvas element. If you are trying to use Canvas in IE7 and IE8, you will be required to use a third-party library, explorercanvas.

Canvas Text Styling properties

Let’s take a look at the text styling options available in HTML5 Canvas. The Text API includes the following properties for the context object:

  • font: The property is similar to font property of CSS. It specifies the font of the text. Any fonts embedded using @font-face must be loaded before they are referenced. Line-height doesn’t work because it is forced to normal. Example:
context.font = 'italic 400 12px Custom-Font, sans-serif'; 

The above statement gets evaluated to “italic 12px “Custom-Font”, sans-serif”. The font-weight (400) is eliminated because it is the default font-weight value.

For using relative values like %, em, bold, bolder, a standard value for reference must be set. Like, the font size of the context must be set to a value like 10px and then you can use the relative definitions like % and em.

  • textAlign: It is an extended version of text-align property of CSS. It defines the horizontal positioning of the text. The possible values of the property are: start, end, left, right, center. The default values for the property is start.
  • textBaseline: It defines the vertical alignment of the text and can be related to vertical-align property of CSS. The possible values that the property can take are: top, hanging, middle, alphabetic, ideographic, bottom. The alphabetic being the default value.

Methods for Drawing Text

HTML5 provides two methods for drawing text. The methods are fillText and strokeText. These can be used as required to either fill or stroke the text at the given position. The fillStyle applies the fillStyle() to the text and ignores the strokeStyle(). On the contrary, the strokeText() applies strokeStyle() to the text outlines and ignores the fillStyle(). Both functions accept 4 parameters, with 4th parameter, maxWidth, being optional.

context.fillText(text, x, y [, maxWidth])

context.strokeText(text, x, y [, maxWidth])

The positioning of the text in the Canvas Context is controlled by x and y coordinate values. If maxWidth is provided, it scales the text to fit within the width. Example:

context.fillText  ('Web Development Blog', 0, 0);

context.strokeText('Web Development Blog', 0, 50);
HTML5 Canvas Text API Sample

The second line strokes the text 50px below the first text output.

HTML5 Canvas – measureText and width

You might want to measure the text length of the text being passed to the Text API. The context method .measureText provides the option.

metrics = context.measureText(text) 

The method returns the TextMetrics of the given text in the selected font.

The width property of the TextMetrics object returns the advance width of the text that was passed to the measureText() method.

metrics.width

Note that the code snippets will obviously require the canvas area definition and context initialization, as explained earlier.