Browser-side SDF font generator
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
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