JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" class="container" width="400" height="400"></canvas>

<div id="myImage" class="container">
    <img id="webImage" width="400" height="400" />
</div>

CSS

.container {border: 1px solid black; width: 400px; height: 400px; position: fixed; top: 0; left: 0;}

#myCanvas {z-index: 101;}
#myImage {z-index: 100;}

JavaScript

var myCanvas = 0;
var ctx = 0;
var myImage = 0;

window.onload = init();

function init() {
    myImage = document.getElementById('webImage');
    myImage.onload = imageLoaded();
    myImage.src = src="http://www.bytheballsblog.com/wp-content/uploads/2009/07/lucky_the_leprechaun-400-400.jpg";
}

function imageLoaded() {
    myCanvas = document.getElementById('myCanvas');
    ctx = myCanvas.getContext('2d');
    
    var imgd = ctx.getImageData(0,0,400,400);
    var pix = imgd.data;
    
    for (var i = 0, n = pix.length; i < n; i += 4) {
        if (pix[i] !== 0) {
            alert(pix[i]);
            return;
        }
    }
}