title: Simple way to track mouse coordinates while moving over HTML5 canvas
body: <p>Is there a simple way to get relative mouse coordinates while moving mouse over HTML5 canvas?</p>
  
  <p>I found this:</p>
  
  <pre><code>function getMousePos(canvas, evt){
      // get canvas position
      var obj = canvas;
      var top = 0;
      var left = 0;
      while (obj &amp;&amp; obj.tagName != 'BODY') {
          top += obj.offsetTop;
          left += obj.offsetLeft;
          obj = obj.offsetParent;
      }
  
      // return relative mouse position
      var mouseX = evt.clientX - left + window.pageXOffset;
      var mouseY = evt.clientY - top + window.pageYOffset;
      return {
          x: mouseX,
          y: mouseY
      };
  }
  </code></pre>
  
  <p>But it seems too heavy to me. Is there a reason using frameworks (like Kinetic) when working with canvas to simplify such things?</p>