Primitive Text Functions for the HTML5 <canvas> Element

The <canvas> element
provides the browser's javascript with a
two dimensional drawing area. It is a simple path/stroke-fill model
but provides the primitives necessary for making sophisticated
graphical presentations. And you will need to be sophisticated with
your grpahical presentation because you won't be using any printed
words or numbers. What could have been the holy grail of javascript to
user communication was turned into a mime by the omission of text.

Fortunately the 1960s has come to the rescue. A. V. Hershey created
a set of simple vector fonts for pen plotters which were released
by the US National Institute of Standards (NIST). The code presented
here encodes the printable 7-bit ASCII characters in a javascript
file with a handful of functions to add text operations to the
canvas element.

Documentation

In a nutshell the following methods are added to your canvas context:

ctx.drawText = function(font,size,x,y,text)
    Draw text in the specified font and size at the position (baseline). 
    Font is ignored for now, there is only one. The width of the line is set
    automatically from the font size. The ctx.strokeStyle is used.

ctx.measureText = function(font,size,text)
    Return the width of the text if it were drawn with the current
    settings.

ctx.fontAscent = function(font,size)
    This is the ascent from the baseline. It is taller than the
    capital letters. It sort of encompasses the ascent and half the
    leading.

ctx.fontDescent = function(font,size)
    Similar.

ctx.drawTextRight = function(font,size,x,y,text)
    Just for lazy programmers.

ctx.drawTextCenter = function(font,size,x,y,text)
    Also for lazy programmers.
