Safely disposing stage element in EaselJS (CreateJS)

Question

I have an app with a little animation class. The animation class creates a canvas (using jQuery), creates a createjs.Stage element that uses this canvas, and then this stage element is used to do some animations for a short period of time.

When the animation is done, I want to clean up everything so that a new animation can do the same thing.

When using the Stage class, it's necessary to add some listeners, for instance createjs.Ticker.addEventListener(stage), and you might want to add a DOMEventlistener.

I have tried to figure out how to safely remove the stage and canvas, and so far I have found some information saying that it is necessary to set the stage canvas to null(stage.canvas = null) before setting the stage to null

I also found a method on the stage class:

.removeAllEventListeners()

---

So here are my questions:

1. If the canvas and stage is only added in the animation class, is it sufficient to just do like this:

   var animation = new Animation();
   // do some stuff, call some methods on the animation object, and then:
   animation = null;
   

   You will have to manually remove the canvas from the body using jQuery.remove() or something to get rid of the canvas, I guess.

2. If the above method is not the correct way, will the .removeAllEventListeners() be sufficient to call, when animation is done before setting the stage to null?

---

I am generally not sure how to make sure that everything is garbage collected, so any advice is welcome!

Underlinen

Did you ever find an answer to this? – Grochow

animation = null should not be necessary when the var animation is no longer accessible. The only thing that could possibly keep your canvas or stage in memory is if there are still listeners attached, or jQuery is keeping a reference to them. So clearing all listeners manually and also using jQuery.remove() should be enough. – Averroes