Need help with tiny-sdf?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

368 Stars 41 Forks Other 81 Commits 6 Opened issues


Browser-side SDF font generator

Services available


Need anything else?

Contributors list

TinySDF Build Status

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
    fontStyle: 'normal',      // CSS font-style
    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:

  • data
    is a
    array of alpha values (0–255) for a
  • 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.
  • glyphHeight
    Height 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

— only
in 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. It's 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.