Actualmente tengo dos círculos en un<canvas> etiqueta con HTML5 y JavaScript.

Ahora estoy tratando de agregar una imagen (hecho) que cambia según el mouse-over y haga clic.

Es básicamente una implementación de un botón de reproducción / pausa con un cambio de color adicional cuando el usuario pasa el botón por encima del botón.

Parece que no puedo entender cómo funcionan los eventos en las formas en HTML5 ya que no son objetos ... Aquí está mi código en este momento:

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";

}

1) Cómo manejar eventos en formas creadas con<canvas> ?

2) Cómo limpiar / eliminar imágenes en la<canvas> ¿Al sustituirlo por otro?

Gracias por adelantado !