I am adding a canvas to the DOM, and then using CreateJS to build a game. I am initialising a CreateJS ticker, and adding animations and graphics. Everything works fine, but only once. If I remove the canvas and the game code, I can't add it again later on - the canvas just doesn't show anything anymore.

My question: how do I properly clear all CreateJS functions from memory, and start anew with a new canvas? It seems that CreateJS keeps holding on to old listeners and elements, even though I removed everything.

This is my code:

// remove canvas and then restart - this causes buggy behavior
this.removeAndRestart = function() {
    document.getElementById("gamecontainer").innerHTML = '';
    createjs.Ticker.removeAllEventListeners();
    setTimeout(this.showGame, 1000);
}

// simply start the game - this works only the first time
this.showGame = function() {
        document.getElementById("gamecontainer").innerHTML = '<canvas id="gamecanvas" width="900" height="400"></canvas>';
        this.stage = new createjs.Stage("gamecanvas");

        // create the ticker and update the stage
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick", tickHandler);
}

I am adding a canvas to the DOM, and then using CreateJS to build a game. I am initialising a CreateJS ticker, and adding animations and graphics. Everything works fine, but only once. If I remove the canvas and the game code, I can't add it again later on - the canvas just doesn't show anything anymore.

My question: how do I properly clear all CreateJS functions from memory, and start anew with a new canvas? It seems that CreateJS keeps holding on to old listeners and elements, even though I removed everything.

This is my code:

// remove canvas and then restart - this causes buggy behavior
this.removeAndRestart = function() {
    document.getElementById("gamecontainer").innerHTML = '';
    createjs.Ticker.removeAllEventListeners();
    setTimeout(this.showGame, 1000);
}

// simply start the game - this works only the first time
this.showGame = function() {
        document.getElementById("gamecontainer").innerHTML = '<canvas id="gamecanvas" width="900" height="400"></canvas>';
        this.stage = new createjs.Stage("gamecanvas");

        // create the ticker and update the stage
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick", tickHandler);
}

• javascript
• canvas
• easeljs
• createjs

Share Follow asked Dec 3, 2013 at 0:51 KokodokoKokodoko 28.2k3636 gold badges132132 silver badges205205 bronze badges 3

• Do you see any errors in the console when you restart the game? Could you put an example up on jsfiddle? – net.uk.sweet Commented Dec 3, 2013 at 1:21
• This sounds like it could be a bug in EaselJS. This is cross-posted on the munity forum here: munity.createjs./discussions/easeljs/… -- We will look into it, and answer it there. – Lanny Commented Dec 3, 2013 at 15:50
• I have created a fiddle here, it doesn't show all my issues but you can see that the tween is not firing after restarting the whole canvas game app. jsfiddle/BUyyv – Kokodoko Commented Dec 3, 2013 at 17:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you are changing canvases, or resetting the stage, make sure to remove the DOM events from the stage. From the docs:

---

enableDomEvents(Boolean enable)

Enables or disables the event listeners that stage adds to DOM elements (window, document and canvas). It is good practice to disable events when disposing of a Stage instance, otherwise the stage will continue to receive events from the page.

When changing the canvas property you must disable the events on the old canvas, and enable events on the new canvas or mouse events will not work as expected. For example:

myStage.enableDOMEvents(false);
myStage.canvas = anotherCanvas;
myStage.enableDOMEvents(true);

---

http://www.createjs./Docs/EaselJS/classes/Stage.html#method_enableDOMEvents

I am not sure if this will solve your problem, but it could help.

i remend you to use this

//create listener tick
createjs.Ticker.addEventListener('tick',tick);
//remove listener tick
createjs.Ticker.removeEventListener('tick',tick);
//exemple stopped object moves in Y axe if it exceeds heigth of canvas 
createjs.Ticker.addEventListener('tick',tick);
function tick(){
    console.log( myBitmap.x +" "+myCanvas.width);
    if (myBitmap.y < myCanvas.height){
        myBitmap.y=myBitmap.y+10;
    }else{
        createjs.Ticker.removeEventListener('tick',tick);
    }
    scene.update();
}