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 = new createjs.Stage("DogeCanvas");
          var dog = new createjs.Bitmap("doge.jpg");
          var circle = new createjs.Shape();
          circle.graphics.beginFill("red").drawCircle(0, 0, 50);
          circle.x = 100;
          circle.y = 100;
          dog.x=100;
          dog.y=100;
          stage.addChild(circle, dog);
          stage.update();
    }

And this is the html file

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
        <script src="Doge.js"></script>

    </head>

    <body bgcolor="#C7C7C7" onload="Start();">
          <canvas id="DogeCanvas" width="480" height="320"></canvas>
    </body>
</html>

Why? help please, seems like in everyones else code this works but why this isn't working for me?

Lanny · Accepted Answer · 2016-04-27T17:21:20.353

The image is likely not loaded yet.

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);
}

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();
}

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"});

answer is totally correct :), only to help others to use the point 2 , to listen the `onload` event for the image you can use the `image` property of `createjs.Bitmap` like: `var bitmap = new createjs.Bitmap("image.jpg"); bitmap.image.onload = function() { stage.update(); }; ... stage.addChild(bitmap);` +1 :) — albciff, Dec 18 '14 at 22:13

easeljs not showing bitmap

1 Answers1

Linked

Related