JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='myCanvas'></canvas>
<div id='results'></div>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20pt Georgia";

var text = "Something happened, we're notifying you of it so you don't miss it and then get angry. That would be very bad indeed... And I suppose you'd blame *us* for that, wouldn't you? Typical.";

// Bespin hack, I guess. Doesn't actually work for getting font-size in px;
//var fontPxSize = ctx.measureText("M").width;

// ... or hardcode to match declaration above
var fontPxSize = 27;

console.log("Font size: ", fontPxSize);

var measureHeightNaive = function (ctx, fontPxSize, layoutWidth, text) {
    var textWidth = ctx.measureText(text).width;
    var textHeight = textWidth / layoutWidth * fontPxSize;
    return textHeight;
}

var measureHeightWithWordWrap = function (ctx, fontPxSize, layoutWidth, text) {
    var spaceWidth = ctx.measureText(" ").width;
    var words = text.split(" ");
    var lineCount = 1;
    var offset = 0;
    var wordWidth;

    for (var i = 0; i < words.length; i++) {
        wordWidth = ctx.measureText(words[i]).width;
        offset = offset + wordWidth + spaceWidth;
        if (offset > layoutWidth) {
            //console.log("Line break!");
            offset = wordWidth;
            lineCount = lineCount + 1;
        }
    }
    //console.log("Line count: ", lineCount);
    return fontPxSize * lineCount;
}

console.log(measureHeightNaive(ctx, fontPxSize, 320, text))
console.log(measureHeightWithWordWrap(ctx, fontPxSize, 320, text))

var runCount = 1000;

var timerNaive = (new Date()).getTime();
console.profile("Naive")
for (var counter = 0; counter < runCount; counter++) {
    measureHeightNaive(ctx, fontPxSize, 320, text)
}
console.profileEnd("Naive")
timerNaive = (new Date()).getTime() - timerNaive;

var timerWordWrap = new Date().getTime();
console.profile("withWordWrap")
for (var counter = 0; counter < runCount; counter++) {
    measureHeightWithWordWrap(ctx, fontPxSize, 320,...