easeljs EaselJS: Haven problems replacing a bitmap image in a CreateJS Object

[CyberWEB]

I have been haven some problems trying to replace a image in an existing Object. I have a example of the code I am using to do this.. The background image loads and shows on the canvas fine.. But when I call the handleReplaceImage function it doesn't replace the existing image, but adds the new image so I get the old and the new both in the same CreateJS Object.. So on the canvas I see two Slate Holes when it should be just the new one. So its overlaying..

How do I total replace SlateHole1.png with SlateHole2.png?

Or remove SlateHole1.png from the CreateJS Object?

I guess both would be worth knowing if anyone can help...

var SlateHole=null;

function init(){
	stage=new createjs.Stage("Canvas");
	createjs.Touch.enable(stage);

	var SlateHoleSrc=new Image();
	SlateHoleSrc.src="images/SlateHole1.png";
	SlateHoleSrc.onload=handleSlateHoleLoad;
}
function handleSlateHoleLoad(event){
	SlateHole=new createjs.Bitmap(event.target);
	stage.addChild(SlateHole);

	stage.update();
}

function handleReplaceImage(event){
	var SlateHoleSrc=new Image();
	SlateHoleSrc.src="images/SlateHole2.png";
	SlateHoleSrc.onload=handleSlateHoleChange;
}
function handleSlateHoleChange(event){
	SlateHole.image=event.target;

	stage.update();
}

 

[b10b]

Suggestion: remove eventListeners when they complete their expected task - else passing the image around may invoke the same callback later unexpectedly.

You may also do well to separate loading concerns from appearance concerns - i.e. load the images first (e.g. using preloadjs), swap the images using interactive code later.  This can also help with the former suggestion.