JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>
<div id="hidden">
    <img id="i1" src="" />
    <canvas id="c1"></canvas>
</div>
<div id="values"></div>

CSS

#test {
    background-image: url('/img/logo.png');
    background-color: blue;
    background-repeat: no-repeat;
    height: 30px;
    width: 100%;
}

#hidden {
    display: none;
}

JavaScript

var div = document.getElementById("test");
var style = window.getComputedStyle(div);

div.onmousemove = function(e) {
    var path = style.getPropertyValue('background-image');
    path = path.substring(4, path.length-1);
    
    var img = document.getElementById("i1");
    img.src = path;
    
    var canvas = document.getElementById("c1");
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    
    var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
    
    var values = document.getElementById("values");
    values.innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3];
};