CODEWITHSUNDEEP
javascripteaseljscreatejs
Jordan Shackelford
Jordan Shackelford

Reputation: 31

CreateJS Will Not Load

I don't know what is wrong with my code. I am very new to javascript. Sometimes createjs will work and other times it doesn't. It doesn't make sense because I am copying exact code from other people's tutorials.

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <script src = "http://code.createjs.com/createjs-2013.12.12.min.js"></script>

    <script>
        var stage;

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

            var ball = new createjs.Shape();
            ball.graphics.beginFill("000000").drawCircle(0,0,50);
            ball.x = 50;
            ball.y = 200;

            stage.addChild(ball);
        }
    </script>
</head>

<body onload = "init()">
    <canvas id = "myCanvas" width = "500" height = "500">
    </canvas>
</body>
</html>

Upvotes: 1

Views: 423

Answers (2)

Tiago Marinho
Tiago Marinho

Reputation: 2216

Even if you already solved your problem, I'll improve your code a little bit. You don't need to mark this as the correct answer since you solved it by yourself.

<html>
<head>
    <title>Example</title>
    <script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>

    <script>
        var stage;

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

            var ball = new createjs.Shape();
            ball.graphics.beginFill("000000").drawCircle(0,0,50);
            ball.x = 50;
            ball.y = 200;
            ball.cache(-50, -50, 100, 100); // -50 is -radius, 100 is radius*2

            stage.addChild(ball);
            stage.update();
        }
    </script>
</head>

<body onload="init()">
    <canvas id="myCanvas" width="500" height="500">Do you even HTML5?</canvas>
</body>
</html>

  1. First, I've added a title to your document, which is required to be valid HTML5. You can change it to whatever you want.

  2. Also, I cached your ball object, so now it's an image instead of a shape and the CPU will not need to redraw it every time the stage is updated. It's a big performance improvement.

  3. Finally, I also added a fallback text if the HTML5 canvas isn't supported ("Do you even HTML5?"). It's between the <canvas> and </canvas> tags, and you can change it to whatever you like.

Upvotes: 2

Jimbo Jonny
Jimbo Jonny

Reputation: 3579

I see nowhere where you actually call update() on the stage to make it draw. In fact, the most puzzling thing is why you say this code even does work sometimes. It should not show anything on screen at all.

Edit: I see you make a comment where you say you figured this out. Nevermind then.

Upvotes: 0

Related Questions