title: HTML5/Canvas Mouse Position off when placed in actual Site
body: <p>I'm capturing mouse position like this</p>
  
  <pre><code>    mouse_move: function(e)
      {
          mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft;
          mousePos.y = e.pageY - vr.o.context.canvas.offsetTop;
      },
  </code></pre>
  
  <p>and it has worked like a dream in all modern browsers while in development, Even tested Wrapping the <code>&lt;canvas/&gt;</code> in a basic dom structure to make sure mouse position adjusted...</p>
  
  <p>obviously now I'm putting it in the actual site it's not working...</p>
  
  <p>You can see here <a href="http://jondavidjohn.com/projects/" rel="nofollow">http://jondavidjohn.com/projects/</a></p>
  
  <p>the mouse position ends up quite a ways south of the actual cursor, anything specifically that could be causing this?</p>
  
  <p><em><strong>SOLUTION</em></strong></p>
  
  <pre><code>mouse_move: function(e)
  {
      mousePos.x = e.offsetX;
      mousePos.y = e.offsetY;
  },
  </code></pre>