Browser-side SDF font generator
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.
Create a TinySDF for drawing glyph SDFs based on font parameters:
const tinySdf = new TinySDF({ fontSize: 24, // Font size in pixels fontFamily: 'sans-serif', // CSS font-family fontWeight: 'normal', // CSS font-weight buffer: 3, // Whitespace buffer around a glyph in pixels radius: 8, // How many pixels around the glyph shape to use for encoding distance cutoff: 0.25 // How much of the radius (relative) is used for the inside part of the glyph });const glyph = tinySdf.draw('泽'); // draw a single character
Returns an object with the following properties:
datais a
Uint8ClampedArrayarray of alpha values (0–255) for a
widthx
heightgrid.
width: Width of the returned bitmap.
height: Height of the returned bitmap.
glyphTop: Maximum ascent of the glyph from alphabetic baseline.
glyphLeft: Currently hardwired to 0 (actual glyph differences are encoded in the rasterization).
glyphWidth: Width of the rasterized portion of the glyph.
glyphHeightHeight of the rasterized portion of the glyph.
glyphAdvance: Layout advance.
TinySDF is provided as a ES module, so it's only supported on modern browsers, excluding IE.
In Node, you can't use
require— only
importin ESM-capable versions (v12.15+):
import TinySDF from '@mapbox/tiny-sdf';
npm test # run tests npm start # start server for the demo page
This implementation is licensed under the BSD 2-Clause license, and 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.