How to execute a function on mouse click on rectangle HTML5 Canvas - html

Question

I'm looking for a simple way to execute a function when someone clicks on a rectangle inside an HTML5 Canvas. I would like to do it in a way that doesn't require any special libraries. Any suggestions?

Answer 1

Here's a no-library way which involves:
Listening for mousedown events:
var canvas=document.getElementById("canvas");
canvas.onmousedown=handleMousedown;
Testing if the clicked mouse position is inside the rectangle:
var rect={x:100,y:100,w:75,h:40};
// mx & my are the mouse coordinates
if(mx>=rect.x && mx<=rect.x+rect.w && my>=rect.y && my<=rect.y+rect.h){
alert("clicked in rect");
}
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var BB,BBoffsetX,BBoffsetY;
setBB();
var rect={x:100,y:100,w:75,h:40};
ctx.fillRect(rect.x,rect.y,rect.w,rect.h);
canvas.onmousedown=handleMousedown;
function handleMousedown(e){
e.preventDefault();
e.stopPropagation();
var mx=e.clientX-BBoffsetX;
var my=e.clientY-BBoffsetY;
if(mx>=rect.x && mx<=rect.x+rect.w && my>=rect.y && my<=rect.y+rect.h){
alert("clicked in rect");
}
}
function setBB(){
BB=canvas.getBoundingClientRect();
BBoffsetX=BB.left;
BBoffsetY=BB.top;
}
body{ background-color: ivory; }
canvas{border:1px solid red;}
<h4>Click in the rect for an alert</h4>
<canvas id="canvas" width=300 height=300></canvas>