JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

<script src="http://nodebox.github.io/opentype.js/dist/opentype.js"></script>
<link rel="stylesheet" href="http://khan.github.io/KaTeX/lib/katex/katex.min.css">
<p>Canvas (outline path vs native font rendering)</p>
<canvas id="canvas" width="400" height="240"></canvas>

<p>SVG (outline path vs native font rendering)</p>
<svg viewBox="0 0 400 240" xmlns="http://www.w3.org/2000/svg">
    <g id="svgpaths" fill="black" stroke="none"></g>
    <text x="200" y="145" font-family="KaTeX_Size3" font-size="100">&#8730;</text>
    <text x="300" y="145" font-family="KaTeX_Math" font-size="100">&#960;</text>
</svg>

CSS

canvas, svg {
    display: block;
    width: 400px;
    border: solid 1px black;
}

JavaScript

var ctx = document.querySelector('canvas').getContext('2d'),
    svgpaths = document.querySelector('#svgpaths'),
    svgNS = "http://www.w3.org/2000/svg";

function rnd(x) {
    return Math.round(100*x)/100;
}

function toSVGPath(commands) {
    return commands.map(function (c) {
        switch (c.type) {
            case 'L':
            case 'M': return c.type + [c.x, c.y].map(rnd).join(' ');
            case 'C': return 'C' + [c.x1, c.y1, c.x2, c.y2, c.x, c.y].map(rnd).join(' ');
            case 'Q': return 'Q' + [c.x1, c.y1, c.x, c.y].map(rnd).join(' ');
            default: return c.type;
        }
    }).join(' ');
}

function drawGlyph(fontName, x, y, fontSize, glyphIndex) {
    opentype.load(fontName, function(err, font) {
        if (err) throw Error('Font could not be loaded: ' + err);
        var path = font.glyphs[glyphIndex].getPath(x, y, fontSize), p;
        path.draw(ctx);
        console.log(font);
        p = document.createElementNS(svgNS, 'path');
        p.setAttribute('d', toSVGPath(path.commands));
        svgpaths.appendChild(p);
    });
}
drawGlyph('http://khan.github.io/KaTeX/lib/katex/fonts/KaTeX_Size3-Regular.ttf', 0, 145, 100, 17);
drawGlyph('http://khan.github.io/KaTeX/lib/katex/fonts/KaTeX_Math-Regular.ttf', 100, 145, 100, 83);

ctx.font = "100px KaTeX_Size3";
ctx.fillText("\u221A", 200, 145);
ctx.font = "100px KaTeX_Math";
ctx.fillText("\u03C0", 300, 145);