title: How to stop an animation in canvas?
body: <p>I have this code to start animation:</p>
  
  <pre><code>function anim()
  {
      mouse_x=cursor_x-x;
      mouse_y=cursor_y-y;
      context.fillRect(0,0,w,h);
      for(var i=0;i&lt;n;i++)
          {
          test=true;
          star_x_save=star[i][3];
          star_y_save=star[i][4];
          star[i][0]+=mouse_x&gt;&gt;4; if(star[i][0]&gt;x&lt;&lt;1) {star[i][0]-=w&lt;&lt;1; test=false; }
          if(star[i][0]&lt;-x&lt;&lt;1) { star[i][0]+=w&lt;&lt;1; test=false; }
          star[i][1]+=mouse_y&gt;&gt;4; if(star[i][1]&gt;y&lt;&lt;1) { star[i][1]-=h&lt;&lt;1; test=false; }
          if(star[i][1]&lt;-y&lt;&lt;1) { star[i][1]+=h&lt;&lt;1; test=false; }
          star[i][2]-=star_speed; if(star[i][2]&gt;z) { star[i][2]-=z; test=false; }
          if(star[i][2]&lt;0) { star[i][2]+=z; test=false; }
          star[i][3]=x+(star[i][0]/star[i][2])*star_ratio;
          star[i][4]=y+(star[i][1]/star[i][2])*star_ratio;
          if(star_x_save&gt;0&amp;&amp;star_x_save&lt;w&amp;&amp;star_y_save&gt;0&amp;&amp;star_y_save&lt;h&amp;&amp;test)
              {
              context.lineWidth=(1-star_color_ratio*star[i][2])*2;
              context.beginPath();
              context.moveTo(star_x_save,star_y_save);
              context.lineTo(star[i][3],star[i][4]);
              context.stroke();
              context.closePath();
              }
          }
      timeout=setTimeout('anim()',fps);
      }
  </code></pre>
  
  <p>I am not able to stop this animation. I don't want to pause, I just wanted to <strong>destroy</strong> the animation function, so that it does not slow the performance of my application. </p>
  
  <pre><code>$(document).ready(function() {
      $(".destroy").click(function() {
          context.destory;
      });
  });
  </code></pre>
  
  <p><strong><a href="http://www.thediscopalace.com/testing.php" rel="nofollow">Here is the full code </a></strong></p>