JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<img src="/img/logo.png">

<pre id="output"></pre>

CSS

body {background: lightblue;padding: 20px;}
pre {color: black}
img {position: relative;}

JavaScript

$(function() {
    
    $('img').mousemove(function(e) {
        
        if(!this.canvas) {
            this.canvas = $('<canvas />')[0];
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
        }
        
        var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
        
        $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);
        
        
    });
    
    
    
});