easeljs not showing bitmap

Question

This is my easel js function, it draws a red circle and an image, however the circle is showing but the image isn\'t.

function Start() {
          var stage          


        

Answer 1

The image is likely not loaded yet.

1. You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)

Example:

createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
    // Other stuff
    stage.update(event);
}

---

2. Listen for the onload of the image, and update the stage again

Example:

var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
    stage.update();
}

---

3. Preload the image with something like PreloadJS before you draw it to the stage. This is a better solution for a larger app with more assets.

Example:

var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
    var image = queue.getResult("image");
    var bmp = new createjs.Bitmap(image);
    // Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});