JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<div></div>

CSS

canvas {
    border: 1px solid;
}
div {
    width: 20px;
    height: 20px;
    border: 1px solid;
}

JavaScript

var img = new Image(),
    cbox = $("div"),
    canvas = $("canvas"),
    context = canvas.get(0).getContext("2d");

img.src = "/img/logo.png";
context.drawImage(img, 0, 0);

canvas.on("mousemove", function(e) {
    var data = context.getImageData(e.offsetX, e.offsetY, 1, 1).data,
        arr = $.makeArray(data);
    
    cbox.css("background-color", "rgba(" + arr.join(",") + ")");
});