0
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
</head>

<body>
<div id ="beeld">
<canvas id ="stageCanvas" width="1024" height="576">
<script src ="javascript.js"></script>
</canvas>
</div>

</body>
</html>

This is my Html

//Javascript Document
var canvas = document.getElementById('stageCanvas');
var stage = new Stage(canvas);

var Background;
var imgBackground = new Image();
imgBackground.src ="images/bg.png";

Background = new Bitmap(imgBackground);
Background.x = 0
Background.y = 0
stage.addChild(Background);
stage.update();

And that's my js.

The image is 1024 by 576, so it should be fullscreen. The original is 2048 by 576. I was planning to do like the background would slide to left and repeat it self when it gets to the end.

So my question is, why doesnt the image show up on the canvas.

I'm a very new to this, so I'm sorry if I'm asking such an easy question.

PS: If I inspect the HTML, it DOESN'T show any errors and it DOES show that the image is being loaded. It's just not.. drawn.. I guess. I'm getting frustrated, because I'm stuck here for a couple hours already.

I FOUND A WORKING CODE

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Easel simple game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script>
var canvas;
var stage;
var bg;
var score;
var ghost;

function init() {
    canvas = document.getElementById("StageCanvas");
    stage = new Stage(canvas);
    score = 0;


    bg = new Image();
    bg.src = "img/bg.png";
    bg.onload = setBG;
}

function setBG(event){
    var bgrnd = new Bitmap(bg);
    stage.addChild(bgrnd);
    stage.update();
}


</script>
</head>

<body onload="init();">
    <canvas id="StageCanvas" width="1240" height="576"></canvas>
</body>
</html>

By the way this code is the work for someone else, so I don't take any credit.

This seems to work perfectly. But once I remove the bg = new Image(); bg.src = "img/bg.png"; bg.onload = setBG; it stops working.

user1978133
  • 3
  • 3

3 Answers3

2
Background = new Bitmap(imgBackground);
ic3b3rg
  • 14,629
  • 4
  • 30
  • 53
0

In HTML: Try to move the script-tag of your javascript.js to right before the </body> or at least not into the <canvas>...</canvas>.
And another thing is: You have a space between src and = and id and =, that might cause problems in some browsers.

In JavaScript: You need to execute the update-method with () otherwise that line will just be a listed reference to the update function.

stage.update();

And a second thing, that I noticed(though not part of the issue): You are using EaselJS 0.4.2, but 0.5.0 is already released, just in case you want to be up-to-date: http://code.createjs.com/easeljs-0.5.0.min.js ;-)

olsn
  • 16,644
  • 6
  • 59
  • 65
  • Overseen the stage.update(); Fixed it, and it's still not showing and for the src, it does load the path but it doesn't show it on my screen. Also for the EaselJS part. I knew that, but we were told to work with EaselJS 0.4.2 – user1978133 Jan 15 '13 at 07:17
  • stage.update() was not the only thing that i mentioned. It should have worked if you also had fixed the other things in your html-markup, but as I can see you already found another solution that works :-) – olsn Jan 15 '13 at 09:44
0

I'm having the same issue with EaselJS at the moment. While it might work for you, you can try and add a ticker which will automatically update the canvas:

createjs.Ticker.addListener(stage);

I was able to get the image to paint on the canvas after adding this, but as soon as I add any transforms to the image (scale, positioning, height, width) they are not applied prior to the image being drawn.

I've been scratching my head over this too.

d_ethier
  • 3,873
  • 24
  • 31