11

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?

1 Answer 1

16

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

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

  1. 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"});
2
  • 4
    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, 2014 at 22:13
  • This is also the case if you want to apply filters.
    – Lanny
    Aug 13, 2018 at 20:47

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.