CODEWITHSUNDEEP
htmlcanvaseaseljs
Nick Verheijen
Nick Verheijen

Reputation: 77

Easel.js > What is wrong with this code?

What is wrong with this code? :S.. My canvas stays empty. Image URL is correct and image loads.

This is my engine.js file:

var canvas;
var stage;

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

    playerImg        = new Image();
    playerImg.src    = 'img/player/walkingbl.png';
    playerImg.onload = onPlayerLoaded;

    Ticker.setFPS(30);
    Ticker.addListener(window);
}

function tick()
{
    stage.update();
}

function onPlayerLoaded()
{
    console.log(playerImg);
    player      = new Bitmap(playerImg);
    player.x    = 300;
    player.y    = 450;

    stage.addChild(player);

    console.log('Player added to stage');
}

$(document).ready(function(){

init();

});

And this is my index.html file:

<!DOCTYPE html>
<html>
<head>
          <title>Game Engine</title>
          <link rel="stylesheet" href="css/main.css" />
</head>
<body>
      <div id='container'>
           <canvas id='#canvas' width='1000' height='350'></canvas>
      </div>

            <script src="js/jquery.js"></script>
            <script src="js/easel.js"></script>
        <script src='js/engine.js'></script>
</body>

I'm new to the whole easel.js and never did anything with Flash or actionscript. I'm an PHP developer by heart, so this is a pretty big transition for me. The lack of documentation / tutorials / examples, make it very hard for me to learn how to use easel.js. So if you have any pointers or resources for me to check out. Please share!

Upvotes: 2

Views: 1923

Answers (1)

Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25267

This line is wrong:

<canvas id='#canvas' width='1000' height='350'></canvas>

The ID doesnt need a #. the right line is:

<canvas id='canvas' width='1000' height='350'></canvas>

but I wouldnt use the word "canvas" as an identifier, as it could be confused with the tag. Better use:

<canvas id='mycanvas' width='1000' height='350'></canvas>

and change the JS code:

canvas = document.getElementById("mycanvas");

Upvotes: 5

Related Questions