Try this. You can hack it with an image map overlayed. Make sure you set the z order of the canvas to put the blank image and its map on top.
<!DOCTYPE html>
<html>
<body>
<p>Click on the canvas.</p>
<img width="398" height="398" alt="Canvas" usemap="#canvasmap" style="border:1px red solid"/>
<map name="canvasmap">
<area shape="rect" coords="0,0,50,50" onclick="alert('You clicked area 1')" >
<area shape="rect" coords="100,100,50,50" onclick="alert('You clicked area 2')" >
<area shape="rect" coords="300,300,50,50" onclick="alert('You clicked area 3')" >
</map>
<CANVAS id='c1' width='402' height='402' style='border: 1px black solid;position:absolute;top:50px;left:6px;z-index:-1'>
</body>
</html>