html - How do I get glyph outlines of a letter as bézier paths using JavaScript?

Question

I want to retrieve the outline information of font glyphs as bézier paths in HTML5. This would allow me to randomize the outlines:

In Cocoa, I would use appendBezierPathWithGlyph:inFont:. In Java, I would use TextLayout.getOutline(). How does this work in JavaScript?

I discovered that Mozilla has mozPathText but I can't get it to work.

Answer 1

Out of necessity I've created my own library called opentype.js. It parses OpenType and TrueType fonts. PostScript and WOFF will be supported in the future.

Here's how it parses a typeface:

• Load the .ttf / .otf file using a XMLHttpRequest.
• Parse the glyf and loca table to extract the letter shapes (glyphs).
• Parse the cname table which contains the mapping from characters to glyphs.
• Parse the head and hmtx table to get the metrics, basically the spacing between each letter.

Then it can create a bézier path:

• Convert the letters of the text into glyphs.
• Convert the coordinates of the glyph to quadratic curves.
• Adjust the spacing using kerning information.

This results in a path that you can draw using the HTML5 canvas:

var font = opentype.parseFont(arrayBuffer);
var path = font.getPath("Hello, World!", {x:0, y:150, fontSize:72});
path.draw(ctx);

The demo website has a live example.