bitmap-sdf

bitmap-sdf computes a signed distance field (SDF) from image or bitmap data directly in the browser, using the Felzenszwalb & Huttenlocher squared Euclidean distance transform algorithm. It accepts a Canvas, CanvasRenderingContext2D, ImageData object, or raw typed array as input and returns a single-channel array of normalized distance values in the 0..1 range.

The library began as a reduced-API fork of Mapbox’s tiny-sdf, stripped down to a single calcSdf(source, options) function with configurable cutoff, radius, channel, and stride parameters. It’s commonly used to precompute distance fields for crisp, resolution-independent text and shape rendering in canvas- and WebGL-based applications.

What You Get

• A single calcSdf() function with no other API surface to learn.
• Support for Canvas, CanvasRenderingContext2D, ImageData, and raw typed-array inputs out of the box.
• Configurable cutoff, radius, channel, and stride options for tuning the output distance field.
• A compact, dependency-free implementation of a well-known 2D Euclidean distance transform algorithm.

Common Use Cases

• Generating SDF glyph textures so canvas/WebGL text renders sharply at any zoom level.
• Precomputing distance fields for icon sets that need crisp, scalable outlines.
• Applying distance-based glow, outline, or falloff effects to shapes drawn on an HTML canvas.
• Serving as the core distance-transform step in font/glyph atlas generation pipelines.

Under The Hood

Architecture bitmap-sdf ships as a single-file module (index.js) with one exported function, calcSDF. The function first normalizes whatever input it receives — a typed array/plain array, a Canvas, a CanvasRenderingContext2D, or an ImageData object — into a flat array of per-pixel float values, detecting stride and channel along the way. It then runs a two-pass 2D Euclidean distance transform (edt), which itself decomposes into per-row and per-column 1D transforms (edt1d) implementing the Felzenszwalb-Huttenlocher lower-envelope algorithm, before combining the inner and outer distance grids into the final normalized output. There is no class hierarchy, dependency injection, or internal module boundary — it’s a compact set of pure functions operating on preallocated arrays, so any change to edt/edt1d directly changes every consumer’s output values.

Tech Stack The published library itself has zero runtime dependencies and is plain, un-transpiled JavaScript (no TypeScript, no build step to consume it — main is index.js directly). The two devDependencies, bubleify and enable-mobile, are only used by the repo’s demo build script, which bundles test.js into the checked-in index.html via browserify/bubleify/indexhtmlify/metadataify/github-cornerify. The code assumes a browser-like environment (references to window, HTMLCanvasElement, ImageData) when handling canvas/image inputs, though the raw-array input path has no such requirement.

Code Quality No automated test suite exists — test.js is a manual/visual demo harness run via the budo dev server (rendering two canvases and a set of range-input sliders), not an assertion-based test file, and there’s no CI configuration in the repository. There are no TypeScript types or JSDoc annotations. Error handling is minimal: calcSDF throws plain Error objects for a couple of clearly invalid-input cases (missing width/height for raw data, unsupported stride) but otherwise assumes well-formed input. An ESLint config is present for style enforcement, and variable naming follows the terser conventions of the source distance-transform algorithm (f, d, v, z) rather than descriptive names.

API Design The public surface is a single function, calcSdf(source, options), which keeps the integration cost low — there’s exactly one thing to learn. It trades some ergonomics for flexibility: callers must know their own data shape (canvas vs. raw array vs. typed array) and, for raw/typed-array inputs, must supply width and height themselves. Documentation is limited to the README’s usage example and two small parameter tables (source types, options), with no separate API reference or example gallery beyond the single demo page.