JSFiddle - React, Tailwind, and code Playground

by samc

JavaScript

var measureCanvas = document.createElement('canvas');
var measureContext = measureCanvas.getContext && measureCanvas.getContext('2d');
var measureText = Array(100).join('wi');

var getWidth = function (fontFamily) {
    if (measureContext) {
        measureContext.font = '128px ' + fontFamily;
        return measureContext.measureText(measureText);
    }
};

var canvasCompare = function (font, fallback) {
    var WIDTH = 5500;
    var HEIGHT = 128;
    var compareStr = '&£$ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijqlmnopqstuvwxyz1234567890';
    var canvasA = document.createElement('canvas');
    var canvasB = document.createElement('canvas');
    
    canvasA.width = WIDTH;
    canvasB.width = WIDTH;
    canvasA.height = HEIGHT;
    canvasB.height = HEIGHT;
document.body.appendChild(canvasA)
document.body.appendChild(canvasB)    
    var ctxA = canvasA.getContext("2d");
    var ctxB = canvasB.getContext("2d");
    
    ctxA.textBaseline = 'bottom';
    ctxB.textBaseline = 'bottom';
    
    ctxA.font = HEIGHT + 'px ' + fallback + ',monospace';
    ctxB.font = HEIGHT + 'px ' + font + ',monospace';
    
    ctxA.fillText(compareStr, 0, HEIGHT);
    ctxB.fillText(compareStr, 0, HEIGHT);
    
    var dataA = ctxA.getImageData(0, 0, WIDTH, HEIGHT).data;
    var dataB = ctxB.getImageData(0, 0, WIDTH, HEIGHT).data;
    
    for (var i = 0; i < dataA.length; i++) {
        if (dataA[i] !== dataB[i]) {
            return false;
        }
    }
    
    return true;
};

alert(canvasCompare('arialsss', 'helvetica'))