JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="300" height="200" />

CSS

canvas {
    border: 3px solid #ccc;
}

JavaScript

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

// Font sizes must be in descending order. You may need to use `sort()`
// if you can't guarantee this, e.g. user input,
var fontSizes = [72, 36, 28, 14, 12, 10, 5, 2],
    text = 'Measure me!';

// Default styles.
ctx.textBaseline = 'top';
ctx.fillStyle = 'blue';

var textDimensions,
    i = 0;

do {
    
   ctx.font = fontSizes[i++] + 'px Arial';

   textDimensions = ctx.measureText(text);
    
} while (textDimensions.width >= canvas.width);

ctx.fillText(text, (canvas.width - textDimensions.width) / 2, 10);