JSFiddle - React, Tailwind, and code Playground

HTML

<img...

CSS

body {
    background-color:#333;
    text-align:center;
    color:#FFF;
    font-family:'Arial',sans-serif;
    margin:0px;
}

img {
    border: 2px solid #990000;
}

JavaScript

(function() {
    var img        =     new Image(),
        output     =     document.getElementById('transparent'),
        bImg       =     document.getElementById('imgcheck');
    img.src = bImg.src;
    
    function isTransparent(e) {
        var x = e.pageX - this.offsetLeft,
            y = e.pageY - this.offsetTop;
        
        var canvas = document.getElementById('imgcheck-canvas') || (function(_this) { var e = document.createElement('canvas'); e.setAttribute('width',_this.width); e.setAttribute('height',_this.height); e.setAttribute('id',_this.id+'-canvas'); e.setAttribute('style','display:none;');document.body.appendChild(e);var cx=e.getContext('2d');cx.drawImage(_this,0,0,_this.width,_this.height); return e; })(this);
        if(canvas.getContext === undefined) { return false; }
        var ctx = canvas.getContext('2d');

        output.innerHTML = ((ctx.getImageData(x,y,1,1).data[3] == 0) ? true:false);
    }
    
    function init() {
        console.log('init');
        bImg.addEventListener('mousemove',isTransparent,true);
    }
    
    img.addEventListener('load',init,true);
})();