I want to retrieve the outline information of font glyphs as bézier paths in HTML5. This would allow me to randomize the outlines:
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:
.ttf
/ .otf
file using a XMLHttpRequest
.glyf
and loca
table to extract the letter shapes (glyphs).cname
table which contains the mapping from characters to glyphs.head
and hmtx
table to get the metrics, basically the spacing between each letter.Then it can create a bézier path:
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.