Canvas Text
The canvas element is great for drawing, but when it comes to text there’s quite a bit missing – e.g. everything. Jim Studt has created a JavaScript plugin called canvas text which extends the canvas context by adding some extra options.
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.
Canvas Text adds the following methods to context:
- ctx.drawText / ctx.drawTextRight / ctx.drawTextCenter: Draw text in the specified font and size at the position (baseline).
- ctx.measureText: Return the width of the text if it were drawn with the current settings.
- ctx.fontAscent / ctx.fontDescent: The ascent / descent from the baseline.
Related demos