Browser-side SDF font generator
Switch branches/tags
Clone or download
ChrisLoer Add BSD license.
Small clarifying comment regarding pedigree.
Latest commit 0fd03d7 Nov 21, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Add basic .gitignore. Jun 28, 2017
LICENSE.txt Add BSD license. Nov 21, 2017 Add BSD license. Nov 21, 2017
index.html Add font-weight to demo. Jun 28, 2017
index.js Add BSD license. Nov 21, 2017
package.json 1.1.0 Jun 28, 2017


TinySDF is a tiny and fast JavaScript library for generating SDF (signed distance field) from system fonts on the browser using Canvas 2D and Felzenszwalb/Huttenlocher distance transform. This is very useful for rendering text with WebGL.

This implementation is based directly on the algorithm published in the Felzenszwalb/Huttenlocher paper, and is not a port of the existing C++ implementation provided by the paper's authors.



Create a TinySDF for drawing SDFs based on font parameters:

var fontsize = 24; // Font size in pixels
var buffer = 3;    // Whitespace buffer around a glyph in pixels
var radius = 8;    // How many pixels around the glyph shape to use for encoding distance
var cutoff = 0.25  // How much of the radius (relative) is used for the inside part the glyph

var fontFamily = 'sans-serif'; // css font-family
var fontWeight = 'normal';     // css font-weight
var tinySDFGenerator = new TinySDF(fontsize, buffer, radius, cutoff, fontFamily, fontWeight);

var oneSDF = tinySDFGenerator.draw('');
// returns a Uint8ClampedArray array of alpha values (0–255) for a size x size square grid