JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ways" style="width:1000px;margin:0 auto;height:100%;">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</div>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 70;
var lineWidth = 5;
var cols = 3;
var rows = 2;
var xDistance = 100;
var yDistance = 50;
var circles = [];

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        // Draw circle
        var offset = radius * 2 + lineWidth;
        var center = radius + lineWidth;
        var x = j * (offset + xDistance) + center;
        var y = i * (offset + yDistance) + center;
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = lineWidth;
        context.strokeStyle = '#003300';
        
        // push circle info as objects:
        circles.push({
            id: i + "," + j,    // some ID
            x: x,
            y: y,
            radius: radius
        });
        
        if (j != cols - 1) {
            // Draw horizontal line
            var hLineX = x + radius;
            var hLineY = y;
            context.moveTo(hLineX, hLineY);
            context.lineTo(hLineX + xDistance + lineWidth, hLineY);
        }
        if (i > 0) {
            // Draw vertical line
            var vLineY = y - radius - yDistance - lineWidth;
            context.moveTo(x, vLineY);
            context.lineTo(x, vLineY + yDistance + lineWidth);
        }
        context.stroke();
    }
}

// detect mouse click
canvas.onclick = function(e) {
    // correct mouse coordinates:
    var rect = canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, circle;
    
    // check which circle:
    while(circle = circles[i++]) {
        context.beginPath();
        context.arc(circle.x, circle.y, circle.radius, 0, 2*Math.PI);
        if (context.isPointInPath(x, y)) {
            alert("Clicked circle: " + circle.id);
            break;
        }
    }
};