GRAPHICS PIPELINE • MAY 2026

Pixel-Perfect Font Shaping via HarfBuzz WASM.

While moving from the DOM to the Canvas 2D API for text rendering provides a massive performance boost, it introduces a severe typographical flaw: Canvas fillText() is notoriously bad at complex text shaping. It completely fails to render advanced programming ligatures (like turning => or === into a single, beautiful glyph) commonly found in fonts like Fira Code or JetBrains Mono.

To achieve flawless, desktop-grade typography without sacrificing Canvas performance, NitroIDE completely overrides the browser's text rendering engine by compiling HarfBuzz and FreeType into WebAssembly.

The WASM Shaping Pipeline

Instead of asking the Canvas to draw a string, we pass the string to our HarfBuzz WASM module. HarfBuzz analyzes the font file, processes the ligature rules, and returns an array of exact X/Y coordinates and specific glyph IDs.

// Offloading text shaping to a HarfBuzz WASM module
const fontBuffer = await fetchFont('FiraCode.ttf');
const hbFont = harfbuzz.createFont(fontBuffer);

// Ask HarfBuzz to calculate ligatures for the arrow function
const shapedGlyphs = harfbuzz.shapeText(hbFont, 'const fn = () => {}');

// Render the exact glyph paths to the Canvas
shapedGlyphs.forEach(glyph => {
ctx.fillPath(hbFont.getGlyphPath(glyph.id), glyph.x, glyph.y);
});

Subpixel Kerning: Because we control the exact placement of every single character at the mathematical level, we can implement custom subpixel kerning algorithms, ensuring that italicized comments and dense JSON structures are perfectly legible at any zoom level.

Absolute Typographical Control

This architecture decouples NitroIDE from the host operating system's font rendering quirks. Whether you are on a Windows machine with ClearType or a Mac with Retina scaling, the code in your editor will look mathematically identical, preserving the designer's exact intent.

See Perfect Ligatures.

Type some complex arrow functions and watch HarfBuzz shape them flawlessly.

Test Typography