you can put clear divs over the canvas to catch clicks on a known rectangular area without searching at "click-time".
you can even export the canvas to the background-image of a <table>, use css to style tr/td to size, bind onclicks to TDs, and use the onclick's e.target.cellIndex/e.target.parentNode.rowIndex to get boxy "coords".
if you want the most flexibility, build a mini mvc to avoid math at run-time.
you can use something like (posX / 30) to slice the canvas into 30px wide boxes.
once you know the box number, you can check the relationship from a simple array.
that array can hold links to whatever objects you want, I use strings in this theoretical example:
// id a click with one of these 5 model groups:
//a 3X3 grid of the view of groups:
[ 1,2,1 ],
[ 1,5,1 ],
[ 4,3,3 ]
// control click dispatches to a 90px X 90px 9panel box:
var clickedGroup= groups[
Math.floor( y / 30 )
Math.floor( x / 30 )
alert( clickedGroup ); //should be "bravo" or "delta" or one of those.
no loops, no conditionals, no long-hand pixel coords or brittle repetition.
this pattern de-couples the specific image from the physical layout and from the behavior, allowing placeholders and easy scaling.