title: Why is this basic Canvas animation not smooth?
body: <p>The only thing that I do inside the animation loop is update the x and y coordinates but the circle is still not moving as smoothly as it should. <a href="https://jsfiddle.net/8ugqxz3z/2/" rel="nofollow">This is the fiddle</a>. I am using CraftyJS to animate the circle. Here is the code that does the animation:</p>
  
  <pre><code>.bind("EnterFrame", function (eventData) {
       this.x += this.xDirection;
       this.y += this.yDirection;
       if (this.x &lt; 0) this.xDirection *= -1;
       if (this.y &lt; 0) this.yDirection *= -1;
       if (this.x &gt; (0.96*gWidth)) this.xDirection *= -1;
       if (this.y &gt; (0.96*gHeight)) this.yDirection *= -1;
  });
  </code></pre>
  
  <p>Rest of the calculations are done just once and I don't think just a bunch of multiplications should make the animation lag. Any help on how to make the animation smooth will be appreciated. </p>
  
  <p>I failed to mention earlier that <code>xDirection</code> is equal to <code>0.005*gWidth</code>and <code>yDirection</code> is equal to <code>0.005*gHeight</code>. If <code>gWidth</code> is <code>600</code> the ball is still moving just <code>3px</code>. Is it really that fast? I don't want to specify the width in pixels (gWidth is the screen size) because then the gameplay will be different on different devices. Is there some way to move the circle quickly while still keeping the animation smooth?</p>