One often mentioned shortcoming of the HTML canvas element is drawing text, or to be more precise, the lack of this functionality. This lack seems to be intentional. To quote the current working draft (September 2006):
[D]rawing text is not supported in this version of the API
(there is no way to predict what metrics the fonts will have,
which makes fonts very hard to use for painting)
The argument is valid. Normally you don’t know the metrics because you don’t know the font which is used for rendering. Even if you can specify CSS-like
But isn’t the same argument valid for SVG too? makes sense. However, afaik the same is true for SVG. You never know the metrics of the font .
And if so, normally you cannot be sure that this font is available on the client. But wait, there is a way to make sure that the font is available: you can embed it.
In the following I will discuss two different ways to embed font data.
The first approach is to embed
In the following, I will show three possible ways to overcome this limitation. The three possibilities are:
* Use an embedded image * Use an overlapping div
Benjamin Joffe shows a script that renders text by means of an image. The image contains pre-rendered glylphs. The image is base64-encoded and embedded in the script and loaded dynamically at runtime via the data:-url.
Similar the approach by Mihai Parparita(?) works http://persistent.info/files/canvas-text/
The demo uses a ~87 kb png font.
that canvas has no methods for drawing just a specific part of an image. However, this can be solved by setting an appropriate clipping area that just contain the bounding box of the glyph.
http://www.random.abrahamjoffe.com.au/public/JavaScripts/canvas/fonts.htm
http://www.xml.com/pub/a/2006/05/10/explorercanvas-interactive-web-apps.html