Why wont my sprite appear on top of my background?

I have been practicing using sprites for a game I am going to make and have watched and read a few tutorials, I thought I was close to getting my sprite to appear so I could finally start my game but while practicing I cant get it to work, I have dont 2 seperate tutorials where I can get the sprite and the background to appear by themselfs but cannot get them to work together, I have been using EaselJS too. some of the sprite animation code has been copied from tutorials too.

<!DOCTYPE HTML>
<html>
    <head>
       <meta charset="UTF-8">
       <title>sprite prac<title>

       <!-- EaselJS library -->
       <script src="lib/easel.js"></script>
        <script>



            // Initialize on start up so game runs smoothly
            function init() {

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

               bg = new Image();
               bg.src = "img/grassbg.jpg";
               bg.onload = setBG;
               stage.addChild(background);

                imgMonsterARun = new Image();
                imgMonsterARun.onload = handleImageLoad;
                imgMonsterARun.onerror = handleImageError;
                imgMonsterARun.src = "img/MonsterARun.png";

               stage.update();
            }

            function handleImageLoad(e) {
                startGame();
            }

            // Simple function for setting up the background
            function setBG(event){
               var bgrnd = new Bitmap(bg);
               stage.addChild(bgrnd);
               stage.update();
            }

            function startGame() {
    // create a new stage and point it at our canvas:
    stage = new createjs.Stage(canvas);

    // grab canvas width and height for later calculations:
    screen_width = canvas.width;
    screen_height = canvas.height;

    // create spritesheet and assign the associated data.
    var spriteSheet = new createjs.SpriteSheet({
        // image to use
        images: [imgMonsterARun], 
        // width, height & registration point of each sprite
        frames: {width: 64, height: 64, regX: 32, regY: 32}, 
        animations: {   
            walk: [0, 9, "walk"]
        }
    });

    // create a BitmapAnimation instance to display and play back the sprite sheet:
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

    // start playing the first sequence:
    bmpAnimation.gotoAndPlay("walk");   //animate

    // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
    // of animated rats if you disabled the shadow.
    bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

    bmpAnimation.name = "monster1";
    bmpAnimation.direction = 90;
    bmpAnimation.vX = 4;
    bmpAnimation.x = 16;
    bmpAnimation.y = 32;

    // have each monster start at a specific frame
    bmpAnimation.currentFrame = 0;
    stage.addChild(bmpAnimation);

    // we want to do some work before we update the canvas,
    // otherwise we could use Ticker.addListener(stage);
    createjs.Ticker.addListener(window);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(60);
}

//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
    console.log("Error Loading Image : " + e.target.src);
}

function tick() {
    // Hit testing the screen width, otherwise our sprite would disappear
    if (bmpAnimation.x >= screen_width - 16) {
        // We've reached the right side of our screen
        // We need to walk left now to go back to our initial position
        bmpAnimation.direction = -90;
    }

    if (bmpAnimation.x < 16) {
        // We've reached the left side of our screen
        // We need to walk right now
        bmpAnimation.direction = 90;
    }

    // Moving the sprite based on the direction & the speed
    if (bmpAnimation.direction == 90) {
        bmpAnimation.x += bmpAnimation.vX;
    }
    else {
        bmpAnimation.x -= bmpAnimation.vX;
    }

    // update the stage:
    stage.update();
}




        </script>

    </head>

    <body onload="init();">
       <canvas id="canvas" width="500" height="500" style="border: thin black solid;" ></canvas>
    </body>
</html>

Solution

There are a few places where you are using some really old APIs, which may or may not be supported depending on your version of EaselJS. Where did you get the easel.js script you reference?

Assuming you have a version of EaselJS that matches the APIs you are using, there are a few issues:

You add background to the stage. There is no background, so you are probably getting an error when you add it. You already add bgrnd in the setBackground method, which should be fine. If you get an error here, then this could be your main issue.
You don't need to update the stage any time you add something, just when you want the stage to "refresh". In your code, you update after setting the background, and again immediately at the end of your init(). These will fire one after the other.

Are you getting errors in your console? That would be a good place to start debugging. I would also recommend posting code if you can to show an actual demo if you continue to have issues, which will help identify what is happening.

If you have a newer version of EaselJS:

BitmapAnimation is now Sprite, and doesn't support direction. To flip Sprites, use scaleX=-1
Ticker no longer uses addListener. Instead it uses the EventDispatcher. createjs.Ticker.addEventListener("tick", tickFunction);

You can get new versions of the CreateJS libraries at http://code.createjs.com, and you can get updated examples and code on the website and GitHub.