How to stop an animation in canvas?

Question

I have this code to start animation:

function anim()
{
    mouse_x=cursor_x-x;
    mouse_y=cursor_y-y;
    context.fillRect(0,0,w,h);
    for(var i=0;i<n;i++)
        {
        test=true;
        star_x_save=star[i][3];
        star_y_save=star[i][4];
        star[i][0]+=mouse_x>>4; if(star[i][0]>x<<1) {star[i][0]-=w<<1; test=false; }
        if(star[i][0]<-x<<1) { star[i][0]+=w<<1; test=false; }
        star[i][1]+=mouse_y>>4; if(star[i][1]>y<<1) { star[i][1]-=h<<1; test=false; }
        if(star[i][1]<-y<<1) { star[i][1]+=h<<1; test=false; }
        star[i][2]-=star_speed; if(star[i][2]>z) { star[i][2]-=z; test=false; }
        if(star[i][2]<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>0&&star_x_save<w&&star_y_save>0&&star_y_save<h&&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);
    }

I am not able to stop this animation. I don't want to pause, I just wanted to destroy the animation function, so that it does not slow the performance of my application.

$(document).ready(function() {
    $(".destroy").click(function() {
        context.destory;
    });
});

Here is the full code

Solution

To tell the garbage collector to free the context memory, just set its reference variable to null.

context=null;

Before setting the context to null, you must stop the animation which you can do like this:

Create a Boolean flag that indicates if any future animation should execute:

// allow anim to do its animations
var doAnim=true;

Then, in the animation loop, if the flag indicates "stop" you simply return without executing the animation code:

function anim(){
    if(!doAnim){context=null; return;}
    ...
}

To stop animating, just set the flag to "stop":

doAnim=false;

Then if you later want to restart animating, you just reset the flag and call anim to start animating.

var context=...
doAnim=true;
anim();

Comments

[Rahayu]

I intend to like this, when there is someone who opened my site but the animation canvas intrusive. then there is a button to turn off the animation. Hmm not working i use restore

[Rahayu]

Work!! but how to remove star? because when stopped. star also stopped. I want to create a clean canvas

[markE]

You can clear the entire canvas with if(!doAnim){context.clearRect(0,0, context.canvas.width, context.canvas.height); context=null; return;} Good luck with your project! :-)