EaselJS: undefined is not a function?

Question

I am creating a very simple application in VS2013 in web application.

HTML

<canvas id="sprite" height="400" width="300"></canvas>
    <script src="JS/TestGame.js"></script>

TestGame.js

    var imgPath = 'Icons/baby_bear.png';
    var bear1 = new createjs.Bitmap(imgPath);
    var bear2 = new createjs.Bitmap(imgPath);
    var bear3 = new createjs.Bitmap(imgPath);
    bear2.x = 200;
    bear3.x = 400;
    var stage = document.getElementById("sprite");
    stage.addChild(bear1, bear2, bear3);

I am getting the following error in my chrome javascript console

Uncaught TypeError: undefined is not a function TestGame.js:10

Change

var imgPath = 'Icons/baby_bear.png';
var bear1 = new createjs.Bitmap(imgPath);
var bear2 = new createjs.Bitmap(imgPath);
var bear3 = new createjs.Bitmap(imgPath);
bear2.x = 200;
bear3.x = 400;
var stage = new createjs.Stage("sprite");
stage.addChild(bear1, bear2, bear3);
stage.update();

Irony is that now javascript console is not complaining about anything but my bears are not getting displayed?

Answer 1

The reason nothing is displayed is that you are updating your stage immediately after the images are requested, so they are not loaded when the stage is drawn.

You will need to either:

1. Constantly update the stage using Ticker (which is only good if you are doing that anyway for other reasons)
2. Listen for onload on the image, and update the stage
3. Ensure your content is loaded before you update the stage. Check our PreloadJS for example. http://preloadjs.com

Here is a quick example of #2. I only recommend this if you are doing something quick. If you build a more complex app, you should consider preloading content.

var imgPath = 'Icons/baby_bear.png';
var image = new Image();
image.onload = draw;
image.src = imgPath;

function draw() {
    var bear1 = new createjs.Bitmap(image);
    var bear2 = new createjs.Bitmap(image);
    var bear3 = new createjs.Bitmap(image);
    bear2.x = 200;
    bear3.x = 400;
    var stage = new createjs.Stage("sprite");
    stage.addChild(bear1, bear2, bear3);
    stage.update();
}

Note that I also changed something else: The first is that the same image reference is used, instead of passing in a string path to all 3. By passing a string, images are created for each instance in the background, rather than sharing a reference, which will be better for memory AND performance reasons.

One last note is that you can change the example to set up everything immediately, and ONLY call the stage.update() when the image loads:

var imgPath = 'Icons/baby_bear.png';
var image = new Image();
image.onload = draw;
image.src = imgPath;

var bear1 = new createjs.Bitmap(image);
var bear2 = new createjs.Bitmap(image);
var bear3 = new createjs.Bitmap(image);
bear2.x = 200;
bear3.x = 400;
var stage = new createjs.Stage("sprite");
stage.addChild(bear1, bear2, bear3);

function draw() {
    stage.update();
}

Cheers.

Answer 2

addChild method actually can handle more than one parameter. Details here: http://www.createjs.com/Docs/EaselJS/files/easeljs_display_Container.js.html#l161

I think you'd better check whether you have include the CreateJS library

Answer 3

My first inclination would be to say that document.getElementById("sprite") did not find the element so the result was undefined. Since undefined is not an object your next line would give you that error. Try this...

...
var stage = document.getElementById("sprite");
if(!stage){
    alert("canvas not found")
}

stage.addChild(bear1, bear2, bear3);

Answer 4

I believe your problem is that you are attempting to add 3 children with a single addChild method, and it is only expecting 1 parameter. A definition of addChild with 3 parameters may not exist. You may want to try breaking this line out into 3 like in the following:

stage.addChild(bear1);
stage.addChild(bear2);
stage.addChild(bear3);