JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.4/jcanvas.js"></script>
<canvas width="800" height="600"></canvas>
<span id="output"></span>

CSS

body {
  margin: 0;
  padding: 0;
}
#output {
  position: fixed;
  left: 0;
  top: 0;
  color: white;
}

JavaScript

cv = $("canvas");
        cv.drawImage({
            source: "http://webentwicklung.ulrichbangert.de/getimage.php",
            layer: true,
            crossOrigin: 'anonymous',
            x: 0, y: 0, fromCenter: false,
            mousemove: function (layer) {
                cv.setPixels({
                    x: layer.eventX, y: layer.eventY,
                    width: 1, height: 1,
                    // loop through each pixel
                    each: function (px) {
                        console.log(px.r, px.g, px.b);
                        $("#output").html("r=" +px.r + " g=" + px.g + " b=" +px.b)
                    }
                });
            }
        });