Question

I have a webpage and I am trying to place a canvas inside a set of div tags. However I need the canvas to be on top / a layer above the images within the div. No matter what I try or where I place the canvas html line, I can not get it to work canvas to show above the image in div1.

First I define the styles of the div classes.

#div1 {width:100%; background:transparent url(img/header-bg.png) no-repeat; height:400px; position:relative;}
#div2 {width:100%; background:transparent url(img/nav-bg.png) repeat-x;}
#div3 {
height:450px;
width:100%;
position:absolute; 
background:transparent url(animation/SampleAnim_0010000.png) no-repeat 80% 0; 
}

#div4 {
height:390px; 
width:100%; 
border-bottom:10px solid rgba(255, 255, 255, 0.5);
}

Then my html

<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">             

            </div><!--div4-->

        </div><!--div3-->
    </div><!--div2-->
</div><!--div1-->

No matter where I insert within the divs

<canvas id="canvas" width="500" height="220"></canvas>

the image set in id=div1 (img/header-bg.png) overlaps the canvas. div2, div3 and div4 are correctly overlapping div1. How can I do this with the canvas?

My canvas script looks something of the lines of

<script>

var canvas = document.getElementById('canvas');
if(canvas.getContext){
    // canvas animation code here:
    var ctx = canvas.getContext('2d');

    var lhs = new Image();

    lhs.src = "animation/SampleAnim_0010000.png";

        ctx.drawImage(lhs, 0, 0);

Any help would be greatly appreciated.

Answer 1

Appears to be working for me: http://jsfiddle.net/RnEc6/1/

<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">             
                <canvas id="canvas" width="500" height="220"></canvas>
            </div><!--div4-->
        </div><!--div3-->
    </div><!--div2-->
</div><!--div1-->​

I’m thinking you have a typo somewhere or styling applying a z-index to your div or canvas elements.