<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenType writing</title>
    <script type="text/javascript" src="opentype.js"></script>
    <style>
        body {
            font: 13px Helvetica, arial, freesans, sans-serif;
            line-height: 1.4;
            color: #333;
            margin: 0 0 50px 0;
            padding: 0;
        }
        .container {
            width: 940px;
            margin-left: auto;
            margin-right: auto;
        }
        #glyphs {
            clear: both;
        }
        .wrapper {
            float: left;
            margin: 5px;
            border: 1px solid #ccc;
        }
        .wrapper span {
            text-align: center;
            background: #ddd;
            display: block;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 id="fontFamilyName"></h1>
    <p>This font is generated dynamically in the browser.</p>
    <button onclick="gFont.download()">Download Font</button>

    <div id="glyphs"></div>
</div>

<script>

    var gFont;

    // Create a canvas and adds it to the document.
    // Returns the 2d drawing context.
    function createGlyphCanvas(glyph, size) {
        var canvasId, html, glyphsDiv, wrap, canvas, ctx;
        canvasId = 'c' + glyph.index;
        html = '<div class="wrapper" style="width:' + size + 'px"><canvas id="' + canvasId + '" width="' + size + '" height="' + size + '"></canvas><span>' + glyph.index + '</span><span>' + glyph.name + '</span></div>';
        glyphsDiv = document.getElementById('glyphs');
        wrap = document.createElement('div');
        wrap.innerHTML = html;
        glyphsDiv.appendChild(wrap);
        canvas = document.getElementById(canvasId);
        ctx = canvas.getContext('2d');
        return ctx;
    }

    opentype.load('fonts/FiraSansOT-Medium.otf', function (err, font) {
        if (err) {
            console.log(err);
        }
        gFont = font;
        font.glyphs = font.glyphs.slice(0, 100);
        var buffer = font.toBuffer();
        var font2 = opentype.parse(buffer);
        console.log(font2.familyName);
        document.getElementById('fontFamilyName').innerHTML = font2.familyName;

        for (var i = 0; i < font2.glyphs.length; i++) {
            var glyph = font2.glyphs[i];
            var ctx = createGlyphCanvas(glyph, 150);
            var x = 50;
            var y = 120;
            var fontSize = 72;
            glyph.draw(ctx, x, y, fontSize);
            glyph.drawPoints(ctx, x, y, fontSize);
            glyph.drawMetrics(ctx, x, y, fontSize);
        }
    });


</script>
</body>
</html>

Add a test file that loads and saves an existing font.
Add a test file that loads and saves an existing font.
