Search code examples
canvasbitmaphtml5-canvascreatejs

canvas.removeChild(bitmapText) is not working


I am creating an animation and I want to remove a bitmap and replace it with a new one. I am able to add the new bitmap on the canvas but I cannot seem to remove the old one. My code looks like this:

var canvas;
var bitmapText;

// onload call
function init() {
    canvas = new createjs.Stage("canvas");
    bitmapText = bitmapTextInit(); // adds bitmap text to canvas
    counter = 0;
    canvas.update();
}

function bitmapTextInit() {
    var bitmapText = new createjs.Bitmap("bitmapText.png");
    canvas.addChild(balloonsText);
}

function removeBitmapText() {
    canvas.removeChild(bitmapText);
}

function addNewtext() {
    var newText = new createjs.Bitmap("newText.png");
}

I have a function that if == true it removes old image and adds new image as well as playing music.

function compareAndPlayInit() {
if (counter == 3) {
    console.log("true");
    removeBitMapText();
    addNewText();
    createjs.Sound.play(music);
}

When the counter reaches to 3, it adds the new bitmap text (addNewBitmapText();) and plays the music (createjs.Sound.play(music);) but does not remove the old bitmap text (removeBitMapText();).


Solution

  • Remove the var in var bitmapText (in bitmapTextInit()), you are creating a new variable.