The following is a demonstration of how to render text on a canvas element, which I created because it lacks a native way to do so.

It works by downloading the font as a PNG image, which contains copies of all the glyphs required (this example is limited to uppercase A-Z, lowercase a-z and space). Regions of the image which describe the location of each glyph are hard coded into an array. The script then uses that information to render each character in the string from the specified image region.

This is able to render any string of text consisting of the supported characters. This example is a proof of concept only. But with a little more work, it wouldn't be too hard to do things like specifying the font size (by scaling the images, which I've currently hard coded), set the starting point or any other extension.

© Public Domain