title: Canvas images and Click event
body: <p>I have currently two circles in a <code>&lt;canvas&gt;</code> tag with HTML5 &amp; JavaScript.</p>
  
  <p>Now I'm trying to add an image (done) that changes based on mouse-over and click.</p>
  
  <p>It's basically an implementation of a play / pause button with an extra color change when the user mouse-overs the button.</p>
  
  <p>I can't seem to figure out how events work on shapes in HTML5 since they are not objects ... Here is my code at the moment :</p>
  
  <pre><code>window.onload = function() {
  
        var canvas = document.getElementsByTagName('canvas')[0];
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
  
  
        //Outer circle
        context.beginPath();  
        context.arc(centerX, centerY, 150, 0, Math.PI * 2, false);
        context.fillStyle = "#000";
        context.fill();
        context.stroke();
  
        //Inner cicle
        context.beginPath();
        context.arc(centerX, centerY, 75, 0, Math.PI * 2, false);
        context.fillStyle = "#fff";
        context.fill();
        context.stroke();
  
        //Play / Pause button
        var imagePlay = new Image();
        var imageHeight = 48/2;
        imagePlay.onload = function() {
          context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight);
        };
        imagePlay.src = "images/play.gif";
  
  }
  </code></pre>
  
  <ol>
  <li><p>How to handle events on shapes created with <code>&lt;canvas&gt;</code>?</p></li>
  <li><p>How to clean-up / remove images on the <code>&lt;canvas&gt;</code> when replacing it with another one?</p></li>
  </ol>