JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 75, 50, 0, 2 * Math.PI);
context.stroke();

context.fillStyle = "rgb(255,255,255)";
context.fill();

context.fillStyle = "rgb(255,0,0)";
context.fillRect(50, 50, 50, 50);

$('#canvas').click(function(e) {
    var pixel = context.getImageData(e.offsetX, e.offsetY, 1, 1).data;
    var color = {
        r: pixel[0],
        g: pixel[1],
        b: pixel[2],
        a: pixel[3]
    };
    console.log(color);
    if (color.a > 0) {
        alert("There is something here!");
    }
});