JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cnv" style="height: 200px; width:100%"></canvas>
<button id="startGame">
Start Game
</button>

CSS

body {
  background: #666;
}

canvas {
  background: fff;
}

JavaScript

var canvas = document.getElementById("cnv")
var context = canvas.getContext("2d");
var elements = [];
document.getElementById("startGame").addEventListener("click", function() {
    createGameCircle();
});
canvas.addEventListener('mousedown', function(e) {
	var x = event.pageX - canvas.offsetLeft,
        y = event.pageY - canvas.offsetTop;
    console.log(x, y);
    elements.forEach(function(element) {
        if (y > element.r && y < element.top + element.height && x > element.left && x < element.left + element.width) {
            console.log('clicked an element');
        }
    });
});
function createGameCircle() {
    radius = 20;

    context.clearRect(0, 0, canvas.width, canvas.height);

    var circle = {
        rand_x: Math.random(1) * 100,
        rand_y: Math.random(1) * 100
    };
    
    elements.push(circle);    
    
    context.beginPath(),
    context.arc(circle.rand_x, circle.rand_y, circle.radius, 0, 2 * Math.PI),
    context.fill(),
    context.closePath()
}