title: Add onclick and onmouseover to canvas element
body: <p>I want to add an <code>onclick</code>, <code>onmouseover</code> and an <code>onmouseout</code> events to individual shapes in a canvas element. </p>
  
  <p>I have tried doing this with SVG in different ways and found no single method will  work in all the major browsers. </p>
  
  <p>Maybe, is there a simple way to add an <code>onclick</code> and probably other events to canvas shapes?</p>
  
  <p>Can someone please show me how to add an <code>onclick</code>?</p>
  
  <p><strong>Here is my code:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>canvas
  {
    background:gainsboro;
    border:10px ridge green;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;canvas id="Canvas1"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>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")
  }
  </code></pre>