JSFiddle - React, Tailwind, and code Playground

JavaScript

WebFontConfig = {
    google: { families: [ 'Eagle+Lake::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();


measureFontHeight3 = function(font)
    {
        var left = 0;
        var top = 0;
        var height = 200;
        var width = 200;

        // Draw the text in the specified area
        var canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.font = font;
        ctx.textBaseline = 'top';
        ctx.fillText('gM', 0,0);

        // Get the pixel data from the canvas
        var data = ctx.getImageData(left, top, width, height).data,
            first = false, 
            last = false,
            r = height,
            c = 0;

        // Find the last line with a non-white pixel
        while(!last && r)
        {
            r--;
            for(c = 0; c < width; c++) 
            {
                if(data[r * width * 4 + c * 4 + 3]) 
                {
                    last = r;
                    break;
                }
            }
        }

        // Find the first line with a non-white pixel
        while(r)
        {
            r--;
            for(c = 0; c < width; c++) 
            {
                if(data[r * width * 4 + c * 4 + 3]) {
                    first = r;
                    break;
                }
            }

            // If we've got it then return the height
            if(first != r) 
                {
                    var result = last - first;
                    console.log("3: " +result);
                    return result;
             ...