JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="myCanvas" width="200" height="200"> </canvas>
<button id="change" type="button">Change</button>

CSS

#myCanvas {
            border: 2px solid #9C9898;
        }

JavaScript

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d");

ctx.fillStyle = "#f00";
ctx.strokeStyle = "#0f0";

//draw some stuff, this would be your images
var images = [];
images.push({x : 10, y : 10, width:50, height:50}, {x : 70, y : 10, width:50, height:50}, {x : 130, y : 10, width:50, height:50});

for(var i = 0; i < images.length; i++){
    ctx.fillRect(images[i].x, images[i].y, images[i].width, images[i].height); 
}

canvas.onclick = function(e){
    var x = 0,
        y = 0;
   
    if (e.pageX || e.pageY) { 
        x = e.pageX;
        y = e.pageY;
    }
    else { 
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    
    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;
    
    for(var i = 0; i < images.length; i++){
        if(x > images[i].x && x < images[i].x + images[i].width && y > images[i].y && y < images[i].y + images[i].height){
            ctx.strokeRect(images[i].x, images[i].y, images[i].width, images[i].height); 
          alert('Image ' + i + ' selected');  
        }
    }
}