How to remove bitmap image on click from canvas

Question

I am using createjs as my framework. I've placed a Bitmap on the canvas and I created a function to try and remove it but I keep getting an error message in the console that image is not defined. This is what my code looks like:

// onload=init() called in html doc
function init(){

var canvas = new createjs.Stage("canvas");

// Add image to canvas
image = new createjs.Bitmap("image.png");
image.x = 200;
image.y = 180;
image.scaleX = 0.35;
image.scaleY = 0.35;
canvas.addChild(image);

image.addEventListener('click', pop);

canvas.update();
}

//remove image from canvas
function pop() {
console.log('pop');
canvas.removeChild(image);
}

When I click on it, I get the console message "pop" followed by the error I mentioned above. I've tried moving the function inside init but I appear to get the same problem.

Answer 1

Make image as global variable, so that it can be accessed by all the functions in your case function pop.

 var image;// defining 'image' variable as global
 function init(){

    var canvas = new createjs.Stage("canvas");

   // Add image to canvas
   image = new createjs.Bitmap("image.png");
   image.x = 200;
   image.y = 180;
   image.scaleX = 0.35;
   image.scaleY = 0.35;
   canvas.addChild(image);

   image.addEventListener('click', pop);

   canvas.update();

}

//remove image from canvas
function pop() {
  console.log('pop');
  canvas.removeChild(image);
}