title: Canvas relative position
body: <p>I have been playing around with the canvas element in HTML5 and I am trying to get the canvas relative position.</p>
  
  <p>I am using the layerX and layerY which seems like the most obvious solution but for some reason, and maybe this is just how it works the point that the layerX/Y sees is at the left corner of the pointer.  my code is as follows</p>
  
  <pre><code>function ev_canvas (ev) {
      if (ev.layerX || ev.layerX == 0) { // Firefox
        ev._x = ev.layerX;
        ev._y = ev.layerY;
      } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        ev._x = ev.offsetX;
        ev._y = ev.offsetY;
      }
  </code></pre>
  
  <p>It just adds the _x/y elements to the ev object so I can use them on a drawing surface. </p>
  
  <p>Here is a video of what is happening to me:</p>
  
  <p><a href="http://img.zobgib.com/2011-03-21_1413.swf" rel="nofollow noreferrer">http://img.zobgib.com/2011-03-21_1413.swf</a></p>
  
  <p>If you want to play with it yourself you can at <a href="http://research.zobgib.com/beta" rel="nofollow noreferrer">http://research.zobgib.com/beta</a></p>
  
  <p>Do I just need to set a manual offset, or is layerX/Y wrong?</p>
  
  <p>Edit:</p>
  
  <p>I can add a manual offset but this seems like the WRONG way to go about putting the x/y positions in the proper place.</p>
  
  <p>The code for the offset is just:</p>
  
  <pre><code>...
  ev._x = ev.layerX-10;
  ev._y = ev.layerY-13;
  ...
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>In Opera the cursor is a pointer and the position is correct by default. </p>
  
  <p>In Chrome and Safari when you click (by default, without returning false) the cursor turns to a text selector and position is at the bottom of the text selector. </p>
  
  <p>In Firefox the cursor is a pointer but the position is in the center of the hand. </p>
  
  <ul>
  <li><p>Which a <code>return false;</code></p>
  
  <ul>
  <li>Safari on the mousedown/move the cursor remains a pointer but the position is off</li>
  <li>Firefox remains the same as without return false</li>
  <li>Opera still wins</li>
  <li>Chrome the cursor remains a "mouse cursor" and the position is off.</li>
  </ul></li>
  <li><p>With the offset</p>
  
  <ul>
  <li>Safari is close to correct (slightly above)</li>
  <li>Firefox slightly above</li>
  <li>Opera WIN</li>
  <li>Chrome correct</li>
  </ul></li>
  </ul>
  
  <p>There must be a better way </p>
  
  <p>P.S. I cannot test IE so any results on that would be nice</p>