JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<canvas id="tip" width=200 height=40></canvas>
<canvas id="canvas" width="1000" height="15000"> </canvas>

CSS

#tip {
    background-color: white;
    border: 1px solid blue;
    position: absolute;
    left: -200px;
    top: -100px;
}

JavaScript

var colours = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#f4cd42', '#F5F5F5'];
var n = colours.length;
var w = 15;
var h = w * 4;

// create an offsreen canvas containing the desired coloured circles
var off = document.createElement('canvas');
off.width = n * w;
off.height = h;
var ctx = off.getContext('2d');  

// request mousemove events
var tipCanvas = document.getElementById("tip");
var tipCtx = tipCanvas.getContext("2d");
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});

for (var i = 0; i < n; ++i) {
    ctx.beginPath();
		ctx.rect(i*w, 0, w, h)
		// Fill
    ctx.globalAlpha = "0.8"; // Opacity
    ctx.fillStyle = colours[i];
		ctx.fill();
		// Stroke
    ctx.globalAlpha = "1.0"; // Opacity reset
    //ctx.lineWidth = "1";
		ctx.strokeStyle = "black";
    ctx.stroke();
}

// get handles to the on-screen canvas
var canvas = document.getElementById('canvas');
var ctx2 = canvas.getContext('2d');

// create 3000 random points
var points = [];
var num_boxes = Math.floor(canvas.width/w)
							  * Math.floor(canvas.height/h)
console.log("# boxes: " + num_boxes)
for (var i = 0; i < Math.floor(canvas.width/w); ++i) {
	for (var j = 0; j < Math.floor(canvas.height/h); ++j) {
  	var point_left = Math.floor(i*w);
  	var point_top = Math.floor(j*h);
  	var point_right = point_left + w;
  	var point_bottom = point_top + h;
    points.push({
        c: i % n,
        x: point_left,
        y: point_top,
        w: w,
        h: h,
        r: point_right,
        b: point_bottom,
        text: "Data: (" + i + ", " + j + ") at (" + point_left + ", " + point_top + ", " + point_right + ", " + point_bottom + ")"
    });
  }
}

// copy points from the offscreen canvas into the on-page canvas
var t0 = Date.now();
ctx2.font = "bold 15px sans-serif";
ctx2.fillStyle = "black";
for (var i = 0; i < points.length; ++i) {
    var p = points[i];
    ctx2.drawImage(off, p.c * p.w, 0, p.w, p.h, p.x, p.y, p.w, p.h);
    ctx2.fillText(p.c, p.x, p.y+p.h);
		//console.log("RECT:",...