JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://timmywil.github.io/jquery.panzoom/dist/jquery.panzoom.js"></script>
<script src="http://timmywil.github.io/jquery.panzoom/test/libs/jquery.mousewheel.js"></script>
<div class="debug"></div>
<div class="panzoom"><canvas id="myCanvas" width="1000" height="500"></canvas></div>

CSS

#myCanvas {
    background-color: red;
}

.debug {
    position: absolute;
    z-index: 9999;
}

JavaScript

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

var elements = [];

elements.push({x:188,y:50});
elements.push({x:300,y:156});

elements.forEach(function(element) {
    context.beginPath();
    context.beginPath();
    context.arc(element.x,element.y,10,0,2*Math.PI);
    context.stroke();
    context.fillStyle = 'yellow';
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'black';
    context.stroke();
});

var $panzoom = $('.panzoom').panzoom();
$panzoom.parent().on('mousewheel.focal', function( e ) {
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    $panzoom.panzoom('zoom', zoomOut, {
        increment: 0.1,
        animate: false,
        focal: e
    });
});

function getCanvasCoords(x,y){
    var matrix = $panzoom.panzoom("getMatrix");
    var calc_x = x-matrix[4];
    var calc_y = y-matrix[5];
    return {x:calc_x,y:calc_y};   
}

function getDistance(point1, point2){
    var xs = 0;
    var ys = 0;
    
    xs = point2.x - point1.x;
    xs = xs * xs;
    
    ys = point2.y - point1.y;
    ys = ys * ys;
    
    return Math.sqrt( xs + ys );
}

$(document).mouseup(function(e) {
    var coords = getCanvasCoords(e.clientX, e.clientY);
    $('.debug').append('<br />' + coords.x + " , " + coords.y);
    
    elements.forEach(function(element) {
        var distance = getDistance({x:coords.x, y:coords.y}, element);
        if(distance < 16){
            //alert('You clicked an element!');
        }
    });
});