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

You can “press” a drawn key on the canvas by listening for mouseclicks and then hittesting whether the click position is inside any one of the calculator key’s boundary.

Here is code that will return true if a mouseclick is inside a rectangle:

function isPointInsideRect(pointX,pointY,rectX,rectY,rectWidth,rectHeight){
    return  (rectX <= pointX) && (rectX + rectWidth >= pointX) &&
                 (rectY <= pointY) && (rectY + rectHeight >= pointY);
}

If your calculator buttons are round, here is code that will hittest a mouseclick inside a circle:

function isPointInsideCircle(pointX,pointY,circleX,circleY,radius){
    var dx=circleX-pointX;
    var dy=circleY-pointY;
    return  ( dx*dx+dy*dy<=radius*radius  );
}