Search code examples
javascripthtml5-canvascreatejseaseljs

How to completely dispose EaselJS canvas?

I'm working on a ReactJS app in which I'm using EaselJS to handle multiple canvases, on same page I have to add and remove different canvases on the base of different conditions to render different views. Even after removing a canvas using following code to dispose a canvas component

createjs.Touch.disable(this.stage);
this.stage.removeAllChildren();
this.stage.removeAllEventListeners();
this.stage.enableDOMEvents(false);

some events are being triggered. After using application for some time it start to use a lot of processing and memory. After having a look at performance tab in developer tools in chrome, I came to know a timer event is being called for every canvas which ever was added. After inspecting code I come to know that

this.stage.enableMouseOver();

is setting an setInterval timer which is not being removed even after calling all above code and I can't find any way to remove it.

Can anyone please help me to get rid of it.

Thanks in advance

Solution

  • The enableMouseOver method is documented to both add and remove the functionality from a Stage. By passing 0 as the frequency, the interval should be cleared.

    stage.enableMouseOver(0);

    From the documentation:

    Enables or disables (by passing a frequency of 0)

    and

    frequency: Optional param specifying the maximum number of times per second to broadcast mouse over/out events. Set to 0 to disable mouse over events completely.

    I did a quick pass on the code, and it definitely removes the interval.