JSFiddle - React, Tailwind, and code Playground

HTML

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

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;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255) throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

console.log('ok');
// set up some squares
var example = document.getElementById('example');
var context = example.getContext('2d');

context.globalAlpha = 1.0;
//from my understanding, the blue should completely overlapp
//over the red rectangle from this composition type
context.globalCompositeOperation = "destination-over"; 

context.strokeStyle = "rgba(255,0,0,1.0)";
context.strokeRect(0, 0, 50, 50);
context.strokeStyle = "rgba(0,0,255,1.0)";
context.strokeRect(30, 0, 50, 50);

$('#example').mousemove(function (e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#status').html(coord + "<br>" + hex);
    $('#s2').text('red = ' + p[0] + '\tgreen = ' + p[1] + '\tblue = ' + p[2] + '\talpha = ' + p[3]);
});