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
– i maed dis, Commented Dec 31, 2013 at 1:02
Maybe you left it out of your snippet, but you're missing the doctype and the </html> part of the code. You should also using CSS to apply styling to elements rather than using things like "bgcolor" (this is HTML3). — calvinf
– calvinf, Commented Dec 31, 2013 at 2:14
Yes, the <!DOCTYPE html> is on the file but i didn't copy it to the question, also is the </html>. — i maed dis
– i maed dis, Commented Dec 31, 2013 at 2:35

jdeyrup · Accepted Answer · 2015-05-25 09:51:37Z

6

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>

answered May 25, 2015 at 9:51

jdeyrup

1,1541 gold badge13 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:53:54Z

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, 2017 at 11:53

CommunityBot

11 silver badge

answered Dec 31, 2013 at 17:31

Lanny

11.3k1 gold badge24 silver badges30 bronze badges

Collectives™ on Stack Overflow

Adding a simple image in easeljs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related