Make a javascript canvas rectangle clickable

Question

I am creating a simple calculator. Here it is. I am almost done with the basic design but I am confused on how to make the buttons clickable? One trick could be to make a di

Answer 1

Since this looks like it is all pure graphics, one thing I’ve done in the past is just listen for where the mouse presses are and check if I’ve clicked inside a button. It’s pretty manual; basically you’d be making your own button/button primitive handling structure.

It would look something like:

// define some button objects (can also set the press handlers, etc)
// this should actually be in a Button ‘class’ of some sort
var buttonA = {x: 0, y: 320, width: 50, height: 80};
var buttonB = {x: 250, y: 320, width: 50, height: 80};

//insert some rendering code to draw the buttons based on the button objects above

// and when the mouse has been pressed
function mousePressed(inputEvent){
     // loop in here to check which button has been pressed by going through the button objects and responding as needed
}
canvas.addEventListener(“click”, mousePressed, false);

I think it’s basically reinventing the wheel here so I’d check to see if there are existing libraries/frameworks first (I did it this way as a learning exercise).