title: MouseListener and HTML5 canvas object
body: <p>I have been looking at tutorials and yet I can't seem to figure out where I'm going wrong.  This seems like it should be very straight forward yet it's giving me problems.    Below is some simple code for creating a mouse listener for a canvas object.  Currently function clickReporter is not being called when the canvas is clicked.  Any ideas on why not?</p>
  
  <p>HTML5</p>
  
  <pre><code>    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Play Area 2 - Mouse Events and the Canvas&lt;/title&gt;
      &lt;script src="play_area_2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body onload="init();"&gt;
      &lt;canvas id="myCanvas" width="500" height="400"&gt;
      Your browser dosen't support the HTML5 canvas.&lt;/canvas&gt;&lt;br /&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>    var canvas;
      var context;
  
      function init() {
          canvas = document.getElementById("myCanvas");
          context = canvas.getContext("2d");
  
          drawBox();
  
          canvas.addEventListener('onclick', clickReporter, false);
      }
  
      function clickReporter(e) {
          alert("clicked");
      }
  
      function drawBox() {
          context.fillStyle = "black";
          context.strokeRect(20, 20, canvas.width-20, canvas.height-20);
      }
  </code></pre>