Adding a simple image in easeljs

Question

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?

yes it does, i even tried to put it outside the folder and change to "doge.jpg" and the same result .. also. if i put a simple "alert("hello")" in the function it shows perfectly ... — i maed dis, Dec 31 '13 at 01:02
Maybe you left it out of your snippet, but you're missing the doctype and the ` — calvinf, Dec 31 '13 at 02:14
Yes, the is on the file but i didn't copy it to the question, also is the — i maed dis, Dec 31 '13 at 02:35
you try to alert or console var `stage`, maybe it is called before the canvas element is created — Mujtaba Haider, Dec 31 '13 at 02:54
i added the code to draw a circle just below the stage.addChild(bitmap); and when i test, the circle shows correctly in the canvas but the image still doesn't show. — i maed dis, Dec 31 '13 at 03:06
possible duplicate of [easeljs not showing bitmap](http://stackoverflow.com/questions/20850634/easeljs-not-showing-bitmap) — albciff, Dec 18 '14 at 21:56

score 6 · Answer 1 · answered May 25 '15 at 09:51

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>

score 5 · Accepted Answer · edited May 23 '17 at 11:53

5

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

» easeljs not showing bitmap

You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)
Listen for the onload of the image, and update the stage again
Preload the image with something like PreloadJS before you draw it to the stage.

edited May 23 '17 at 11:53

Community

1
1

answered Dec 31 '13 at 17:31

Lanny

11,244
1
22
30

Adding a simple image in easeljs

2 Answers2

Linked