Unable to put one canvas under another

Question

I want to put a canvas under another. I am pretty new at javascript so i apologize in advance if the following code looks a bit messy. I want to make the canvas called "myCanvas" appear behind "coinAnimation". All responses are extremely appreciated.

HTML

<div id="wrapper">
<canvas id="coinAnimation" height="500" width="500"></canvas>
<canvas id="myCanvas" height="500" width="600"></canvas>
</div>

Javascript

<script type="text/javascript">
(function () {
var coin,
    coinImage,
    canvas;                 

function gameLoop () {
    window.requestAnimationFrame(gameLoop);
    coin.update();
    coin.render();
    }

function sprite (options) {
var that = {},
frameIndex = 0,
    tickCount = 0,
    ticksPerFrame = options.ticksPerFrame || 0,
    numberOfFrames = options.numberOfFrames || 1;

    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;

    that.update = function () {

    tickCount += 1;

    if (tickCount > ticksPerFrame) {

    tickCount = 0;

// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) {  

// Go to the next frame
frameIndex += 1;
} else {
frameIndex = 0;
}
}
};
that.render = function () {

// Clear the canvas
that.context.clearRect(0, 0, that.width, that.height);

// Draw the animation
that.context.drawImage(
    that.image,
    frameIndex * that.width / numberOfFrames,
    -110,
    that.width / numberOfFrames,
    that.height,
    0,
    0,
    that.width / numberOfFrames,
    that.height);
    };

return that;
}

// Get canvas
canvas = document.getElementById("coinAnimation");
canvas.width = 600;
canvas.height = 300;

// Create sprite sheet
coinImage = new Image();    

// Create sprite
coin = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 300,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame: 7
    });

// Load sprite sheet
coinImage.addEventListener("load", gameLoop);
coinImage.src = "images/test2.png";

} ());
</script>

<script type="text/javascript">
window.addEventListener('load', function () {
  var
    img = new Image,
    ctx = document.getElementById('myCanvas').getContext('2d');

  img.src = "images/back.png";
  img.addEventListener('load', function () {

    var interval = setInterval(function() {
      var x = 0, y = 0;

      return function () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, x, y);

        x += -1;
        if (x > ctx.canvas.width) {
          x = 0;
        }
      };
    }(), 1000/40);
  }, false);
}, false);
</script>

Answer 1

See here: jsfilddle.net . I added the background colors to demonstrate positioning and z-index.

First, make the wrapper div position relative. This is the position that the container divs will be based off. Then make the container divs absolute positioned to (0,0). Then, set the z-index so that myCanvas is behind coinAnimation.

CSS:

#wrapper
{
    position:relative;    
}

#coinAnimation
{
    background-color:blue; 
    position:absolute;
    z-index:1;
}
#myCanvas
{
    background-color:red;
    position:absolute;
    top:0px;
    left:0px;
    z-index:0;
}

HTML:

<div id="wrapper">
    <canvas id="coinAnimation" height="500" width="500"></canvas>
    <canvas id="myCanvas" height="500" width="600"></canvas>
</div>