Add onclick and onmouseover to canvas element

I want to add an onclick, onmouseover and an onmouseout events to individual shapes in a canvas element.

I have tried doing this with SVG in different ways and found no single method will work in all the major browsers.

Maybe, is there a simple way to add an onclick and probably other events to canvas shapes?

Can someone please show me how to add an onclick?

Here is my code:

canvas
{
  background:gainsboro;
  border:10px ridge green;
}

<canvas id="Canvas1"></canvas>

var c=document.getElementById("Canvas1");

var ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(10,10,60,60);

var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(80,60,60,60);

// these need an onclick to fire them up. How do I add the onclick
function blue()
{
  alert("hello from blue square")
}

function red()
{
  alert("hello from red square")
}