JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="example" width="200" height="60"></canvas>
<div id="status"></div>

CSS

canvas{ border: 1px solid green; }

JavaScript

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}


var status = document.getElementById('status');
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, 200, 200);
context.fillStyle = "rgb(0,0,0)";
context.font = "30px Arial";
context.fillText("Hello World",0,30);
var pos = findPos(example);
var x = example.pageX - pos.x;
var y = example.pageY - pos.y;
var foundTop = false;
xPos = 0;
yPos = 0;
topY = -1;
bottomY = -1;
var fuse = 1000;
while( fuse-- > 0 ){
    //status.innerHTML += yPos+"<br>";
    if( yPos == (example.offsetHeight - 2) ){
        xPos++;
        yPos = 0;
        continue;
    }
	var data = context.getImageData(xPos, yPos, 1, 1).data;
    if( ! foundTop ){
    	if( (data[0] != 255) && (data[1] != 255) && (data[2] != 255) ){
            topY = yPos;
            status.innerHTML += "<br>Found top: "+topY+" X:"+xPos+" Color: rgba("+data[0]+","+data[1]+","+data[2]+")"+"<br>";
        	foundTop = true;
        }
    } else {
    	if( (data[0] == 255) && (data[1] == 255) && (data[2] == 255) ){
            bottomY = yPos;
            status.innerHTML += "<br>Found bottom: "+bottomY+" X:"+xPos+"<br>";
        	break;
        }
    } 
    yPos++;
    if( yPos > example.offsetHeight ){
    	status.innerHTML += ""
            +"Y overflow ("+yPos+">"+example.offsetHeight+")"
            +" - moving X to "+xPos
        	+" - reseting Y to "+yPos 
        	+"<br>"
        ;
		xPos++; 
        yPos = 0;
    }
}
status.innerHTML += "Fuse:"+fuse+", Top:"+topY+", Bottom: "+bottomY+"<br>";
status.innerHTML += "Font height should be: "+(bottomY-topY)+"<br>";