An example of the canvas text functionality

Written by Richard Heyes, on 14th April 2013

A guide explaining how to use the text functionality of the canvas tag and how to use the associated functions and properties to control how your text appears.


To add text to your canvas you can use the fillText() function. There is a strokeText() function that draws outlined text but for most applications you'll be using the fillText() function. The fillText() function does not need to be added as part of a path - like the fillRect() or strokeRect() functions the text functions add the text immediately to the canvas at the coordinates that you specify - like this:

[No canvas support]

To set the font and style used you can use the font property. You can set the size, font face, bold and italic properties. The style (ie whether it's bold or italic) defaults to normal - but that can be omitted so you just need to set the size and the font. Some examples of setting the font are:

context.font = '26pt Arial';
context.font = 'bold 14px Verdana';
context.font = 'italic bold 1pc Monospace';
context.font = 'bold italic 50% sans-serif';

An example

A full example is:

<canvas id="cvs" width="450" height="60" style="border: 1px solid gray">[No canvas support]</canvas>

    window.onload = function (e)
        var context  = document.getElementById('cvs').getContext('2d');
        context.font = '20pt Arial';
        context.fillText('Some text added using fillText', 5,25);
        context.strokeText('Some text added using strokeText', 5,55);

Setting the color

To set the color you can set the fillStyle and strokeStyle properties. Each applies to the corresponding fillText() and strokeText() functions.

context.fillStyle = 'red';
context.fillText('Some example text'5, 20);

context.strokeStyle = 'blue';
context.strokeText('Some example text'5, 50);

The textAlign property

The textAlign property can be used to set the horizontal alignment of the text. You can set it to:

The alignment is relative to an imaginary vertical line positioned at the X coordinate that you specify to the fillText() or strokeText() functions. The start and end options apply to when the document is in rtl reading mode. The default is start.

context.textAlign = 'start';

The textBaseline property

The textBaseline property allows you to vertically align text. It can be one of:

The default is alphabetic. To center align your text you'd choose middle, to align text vertically to the top you'd use top and to vertically align text to the bottom you'd use bottom.

context.textBaseline = 'bottom';

Measuring the width of text

To measure the width of your text you can use the measureText() function. This function takes the text as an argument and importantly uses the current font setting (ie to get the font/size etc). It doesn't return a number - it returns an object of which the only property is the width.

This function doesn't provide the height - so to get the height what you can do is add text to the DOM in a DIV that's positioned off-screen and then measure it using the offsetHeight property. Be sure to use the same font as what you're rendering the text in and also be aware that this method can be very slow - so it's a good idea to cache the results of the measurement (particularly if you're using animation).

context.font = '26pt Arial';
width = context.measureText('Some example text').width;

Wrapping text

There's no native option to specify the width beyond which text should be wrapped. However by measuring the text you can create your own function to do this. The RGraph.text2() function in RGraph.Text2.js.txt does this when you give \r\n in your text. For example:

* The first parameter is an RGraph chart object - though this can be simulated with an
* object literal. The second is an object that contains configuration information for
* the text.
RGraph.text2(context, {
    'x':        5,
    'y':        25,
    'size':     14,
    'font':     'Arial',
    'text':     'Some example\r\ntext',
    'marker':   false,
    'bounding': false

There's a basic example here that shows how to use this function.