Using canvas layers that are not positioned using position:absolute

Question

I am trying to use this example: http://html5.litten.com/using-multiple-html5-canvases-as-layers/ to create multiple html5 layers (Actually only need 2) for a background and then an animation on top of that background.

The problem is the example, and many other solutions that suggest layering canvases using z-index, etc. all seem to position the canvas at left:0 and top:0 in absolute position.

For example: html5 - canvas element - Multiple layers html5 - canvas element - Multiple layers

However, what I would like to do, is have the position be dynamic but always so the two canvases are layered on top of each other.

What I've had to do so far is this:

    <div id="canvasesdiv" align=center; style="text-align:center; float:center">
        <canvas id="bottomlayer-background" style="z-index: 1; border:1px dotted;" align=center>
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
        <canvas id="toplayer-movingstuff" style="z-index: 2; border:1px dotted; position:absolute; left:530px; top:83px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
</div>  

The problem with this approach is that I had to manually figure out where the top left of the bottom layer was and then input that into the top layer. But this position is only true for one browser, on one monitor, on full screen, etc. Obviously, not workable.

When I try and have both just be align=center, then what happens is the canvases appear side-by-side instead of layered on top of each other.

When I try to do absolute position for both, the problem with that is the other stuff in the windows, that were originally below the canvases (i.e. text, tables, etc.) suddenly appear underneath the canvases.

Has anyone else been able to solve this problem?

Thanks!

Answer 1

The way that absolute positioning works is that the target element is absolutely positioned within its closest positioned ancestor. This means that if the containing div is positioned absolute or relative, then the target element will be absolutely positioned within the containing div.

Note: You don't really need the z-index unless you've messed with z-index somewhere else

Another Note: If you want your canvases to behave, set the width and height attributes on them, otherwise things will scale weird.

http://jsfiddle.net/mobidevelop/4WDJz/

HTML

<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>

<div id="contain">
        <canvas id="surface1" width="480" height="160">
        </canvas>
        <canvas id="surface2" width="480" height="160">
        </canvas>
</div>

<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>​

CSS:

#contain {
    width: 480px;
    height: 160px;
    margin: 0 auto;
    position: relative;    
}

#surface1,
#surface2 {
    top: 0;
    left: 0;
    position: absolute;
}

​And, for good measure, JS:

var surface1 = document.getElementById('surface1');
if (surface1 != null) {
    if (surface1.getContext) {
        var context = surface1.getContext("2d");
        if (context != null) {
            context.fillStyle = "rgba(255,0,0,0.25)";
            context.fillRect(0,0,480,160);
        }
    }
}
surface2 = document.getElementById('surface2');
if (surface2 != null) {
    if (surface2.getContext) {
        var context = surface2.getContext("2d");
        if (context != null) {
            var x = 0;
            context.fillStyle = "rgba(0,0,0,1.0)";
            last = new Date();
            setInterval
            (
                function()
                {
                    var now = new Date();
                    var del = (now - last) / 1000.0
                    last = now;

                    context.clearRect(0,0, 480, 160);
                    context.fillRect(x, 10,32,32);                
                    x += 10 * del;
                    if (x > 480) {
                        x = -32;
                    }
                }, 15
            );            

        }
    }
}

​

Answer 2

#canvasesdiv{margin:0 auto; position:relative; width:300px;}

#bottomlayer-background, #toplayer-movingstuff{
    position:absolute; 
    z-index: 1; 
    border:1px dotted blue; 
    height:200px;
    width:300px;
}
#toplayer-movingstuff{
    z-index: 2; 
    border:1px solid red; 
}

​

Working Fiddle

The above should work. Just give the containing element a relative position, which will make the child elements positioned with absolute relative to the parent.