title: Detecting mouse coordinates with precision
body: <p>After a sleepness night I discovered something about <a href="https://stackoverflow.com/questions/17646825/how-to-detect-when-mouse-has-stopped">this question</a> which I think is fundamentally mind boggling, at least to me.</p>
  
  <p>Mouse coordinates <strong>ARE NOT PRECISE</strong> (I guess at a high speed of processing where the whole canvas has to be recreated when movement occurs) as in my codes above. I have tested this code piece by piece and discovered that the problem is not in my loop, but in the precision of </p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>if ((newMouseX !== mouseX) &amp;&amp; (newMouseY !== mouseY)).
  </code></pre>
  
  <p>If you tested this part of code by slower times (which will allow your eyes to detect the difference in coordinates when 'it stops', then you will realise that <code>newMouseX</code> &amp; <code>mouseX</code> are off by 1-2 pixel 90% of the time, > 2 pixel 9% of the time, and only equal about 1% of the time. (I did not measure the statistics but that is what I picked on several rounds of testing).</p>
  
  <p><em>I can't get it to work in <a href="http://jsfiddle.net/3vEqj/" rel="nofollow noreferrer">fiddle</a> but I think you can copy it to your testing ground to see what I mean. If you can get it to work in fiddle it would be great so experts can give it a short :)</em></p>
  
  <p>This means that the mouse is considered to be 'moving' by my code even when it should have 'stopped', and thus 'stops' several times in between, therefore calling the loop too many times in a second, which is the problem I have been having.</p>
  
  <p>I would be happy to hear comments from other experts, including those who can test this and come up with a statistical precision/advice.</p>
  
  <p>My advice, and solution for the moment, is to consider movement when the difference is more than 10 pixels of either coordinates. Of course this presents a problem, but I can leave with that until some better solution comes up.</p>
  
  <p>so instead of </p>
  
  <pre class="lang-js prettyprint-override"><code>if ((newMouseX !== mouseX) &amp;&amp; (newMouseY !== mouseY))
  </code></pre>
  
  <p>i have used </p>
  
  <pre class="lang-js prettyprint-override"><code>if (( Math.abs(newMouseX - mouseX) &gt; 10) || ( Math.abs(newMouseY != mouseY) &gt; 10) )
  </code></pre>
  
  <p>Another thing to consider is how to deal with the mouse position when it goes off my target canvas area... that looks like an infinite movement at the moment!</p>
  
  <p><strong>The Question:</strong></p>
  
  <p>How can I get the precise mouse coordinates so I can compare <code>mouseX</code> &amp; <code>newMouseX</code>?</p>
  
  <p>Thanks.</p>