CODEWITHSUNDEEP
javascripthtmleaseljs
i maed dis
i maed dis

Reputation: 184

Adding a simple image in easeljs

This is my htmlcode: 

<!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>

And this is my Doge.js code:

function Start() {
      var stage = new createjs.Stage("DogeCanvas");
      var doge = new Image();
      doge.src = "images/doge.jpg"
      var bitmap = new createjs.Bitmap(doge);
      stage.addChild(bitmap);
      stage.update();
}

Why it doesn't show anything on the screen? What is wrong?

Upvotes: 2

Views: 19656

Answers (2)

jdeyrup
jdeyrup

Reputation: 1144

As stated above you cannot draw your image until you have loaded it. Try this:

<!DOCTYPE HTML>
<html>
    <title>Easel Test</title>
    <head>
    <script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>

    <script>
        var stage;

        function init() {
            stage = new createjs.Stage("myCanvas");

            var image = new Image();
            image.src = "path/image";
            image.onload = handleImageLoad;
        }

        function handleImageLoad(event) {
            var image = event.target;
            var bitmap = new createjs.Bitmap(image);
            stage.addChild(bitmap);
            stage.update();
        }


    </script>

    </head>
    <body onload="init();">
        <canvas id="myCanvas" width="960" height="580"></canvas>
    </body>

</html>

Upvotes: 6

Lanny
Lanny

Reputation: 11294

The image is not loaded when the stage is updated. I posted an answer here:

» easeljs not showing bitmap

  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)
  2. Listen for the onload of the image, and update the stage again
  3. Preload the image with something like PreloadJS before you draw it to the stage.

Upvotes: 5

Related Questions