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!

Solution

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");