JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<p>Hover over a word.</p>
<h2 id="results">---</h2>
<canvas id="canvas" width=400 height=50></canvas>

CSS

canvas {
    border:1px solid red;
}

JavaScript

$results = $("#results");

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var text = "Lorem ipsum dolor #sit# amet, consectetur adipisicing elit";

var words = text.split(" ");
var wordsBB = new Array(words.length);

ctx.font = "14px arial";

var length = ctx.measureText(words[0]).width;

wordsBB[0] = {
    x: 0,
    y: 0,
    width: length,
    height: 16
}

var accumLength = length;

for (var i = 1; i < words.length; i++) {
    var length = ctx.measureText(" " + words[i]).width;
    wordsBB[i] = {
        x: accumLength,
        y: 0,
        width: length,
        height: 16
    }
    accumLength += length;
}

ctx.fillText(text, 0, 15);
ctx.lineWidth = 0.50;

for (var i = 0; i < words.length; i++) {
    var bb = wordsBB[i];
    ctx.strokeRect(bb.x, bb.y, bb.width, bb.height);
}


function handleMouseMove(e) {
    e.preventDefault();
    var x = parseInt(e.clientX - offsetX);
    var y = parseInt(e.clientY - offsetY);

    $results.text("---");
    for (var i = 0; i < wordsBB.length; i++) {
        var bb = wordsBB[i];
        if (x > bb.x && x < bb.x + bb.width && y > bb.y & y < bb.y + bb.height) {
            $results.text(words[i]);
        }
    }

}

$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});