JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<img id="image" src="https://www.w3schools.com/w3css/img_lights.jpg" width = "200" height = "200">

<p id="output"></p>

JavaScript

img = document.getElementById("image")
output = document.getElementById("output")

img.onmousemove = function(e) {
  if (!this.canvas) {
    this.canvas = document.createElement('canvas');
    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;
  
  document.getElementById("output").innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3];

};