fontpixels.js

fontpixels.js

A javascript library for getting the pixel data of a charactor in a font based on this stackoverflow answer. Check out this page for a demo.

API

var pixelarray = fontpixels.generatepixels(text, resolution, fontFamily, width, lines);

text

// supports ascii...
text = "A";
// and unicode
text = "╫";

It is recommended to only insert a character for the text because the spacing between letters is a bit funky.

resolution

resolution = 30;

Resolution determines both the size of the output and the detail of the output. Larger resolutions output larger pixel arrays and more detail.

fontFamily

fontFamily = "Times New Roman";

Font of the text. Make sure font is loaded before you call fontpixels.generatepixels(). I would recommend WebFont for a font loader.

width

width = 0.3;

Line width of the text. Values between 0 and 1 are usually sufficient. Only works when lines is set to true. Corresponds to canvas ctx.lineWidth property.

lines

lines = false;

Whether to draw the text as lines, like HTML5 canvas ctx.strokeText().

pixelarray

console.log(pixelarray);
	//[{x: 2, y: 4}, {x: 5, y: 6} ...]

The output is an array of (x, y) values of the pixels. You can use the pixels by iterating over them.

pixelarray.forEach(function(value) {
	console.log(value.x, value.y);
});