Stacking multiple canvases in HTML5

Question

I am trying to use four canvases stacked upon eachother but the contents of them won't display besides the contents of the one on the top. I put z-index values to them in order in which I'd like them to display but only the top one is displaying the contents. Their position is absolute and their z indexes are 1, 2, 3 and 4. Is there anything more to it that makes them not display? Or, how many canvases could I stack together in order for all of their contents to display?

I have this:

<div></div>
<canvas id="bg" width="500" height="500"></canvas> <!--z-index:1 -->
<canvas id="lc" width="500" height="500"></canvas> <!--z-index:2 -->
<canvas id="rc" width="500" height="500"></canvas> <!--z-index:3 -->
<canvas id="ch" width="500" height="500"></canvas> <!--z-index:4 -->
<!-- Script that draws image in each canvas with different x and y values -->

The problem is that when I run the function, the picture I am drawing only appears once, which means it only drew it on one canvas... For example, I'll have the script something like this:

function drawImgs() {
    var bg = document.getElementById('bg').getContext('2d'),
        lc = document.getElementById('lc').getContext('2d'),
        rc = document.getElementById('rc').getContext('2d'),
        ch = document.getElementById('ch').getContext('2d'),
        img = new Image();
    img.src = "image.png";
    bg.drawImage(img,0,0);
    lc.drawImage(img,64,64);
    rc.drawImage(img,128,128);
    ch.drawImage(img,192,192);
}
drawImgs();

It will only draw the image on the ch canvas, at X:192, Y:192. Why is that? Is there a way to prevent it or at least make sure that all the images are drawn? Is it because I'm using the same image or are the canvasses just not being transparent? Is there a limit to how many canvasses you can look through?

Edit: However, if I only have two canvasses, both images render. Why is this? Couldn't at least two images render if I have four canvasses stacked together?

Edit: I was messing around with the code that I recieved from you guys (thanks for all the information, everything helped) and I tried to put it into my actual project (I tested the code and it was working before I put it into my project) but the once I put it into my files, it stopped working again. So I messed around and I noticed that when I didn't add CSS to make the page pretty that it would work... I kept messing around and I found out that the background-color of the canvas takes away the transparency, it was just that all along... So I just put it on the first canvas, bg, because my page is black and I wanted the canvas to be white.

While I admit I'm having problems with jsfiddle, the problems I'm having are not [the ones you're experiencing](http://jsfiddle.net/t5EFp/2/)(hit run again if nothing shows). — Daedalus, Jan 04 '14 at 01:20
Edit your fiddle and comment out the two middle canvasses and drawImage calls (lc,rc) and the images will render... — user2673553, Jan 04 '14 at 01:27
You're missing my point. I also just tried that; it doesn't fix the fiddle. Like I said; it works fine if you just hit run again. — Daedalus, Jan 04 '14 at 01:28
I know what you're trying to say. And does it have to do something with loading the canvas or something? I see that it worked if you hit run again, how could I apply that to an html file though? — user2673553, Jan 04 '14 at 01:35
Yes, I haven't set up a server for it and I don't think I would either — user2673553, Jan 04 '14 at 01:39

markE · Answer 1 · 2014-01-04T17:17:24.720

Make sure you use CSS to stack each canvas on top of each other

canvas{position:absolute;border:1px solid red;}

Make sure you give your image time to load

var img=new Image();
img.onload=function(){
    bg.drawImage(img,0,0);
    lc.drawImage(img,64,64);
    rc.drawImage(img,128,128);
    ch.drawImage(img,192,192);
}
img.src="img.png";

Here's an example:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wrapper{position:relative;}
    canvas{position:absolute;border:1px solid red;}
</style>

<script>
window.onload=function(){


    var ctxs=[];
    for(var i=0;i<5;i++){
        ctxs.push(document.getElementById("canvas"+i).getContext("2d"));
        ctxs[i].fillStyle="black";
        ctxs[i].font="12px verdana";
        ctxs[i].fillRect(50,i*30+20,100,20);
        ctxs[i].fillStyle="white";
        ctxs[i].fillText("canvas#"+i,60,i*30+35);
    };

}
</script>

</head>

<body>
    <div id="wrapper">
        <canvas id="canvas0" width=300 height=300></canvas>
        <canvas id="canvas1" width=300 height=300></canvas>
        <canvas id="canvas2" width=300 height=300></canvas>
        <canvas id="canvas3" width=300 height=300></canvas>
        <canvas id="canvas4" width=300 height=300></canvas>
    </div>
</body>
</html>

One final thought: You might take a quick look at jQuery. It is an excellent utility library that does a great job of solving cross-browser inconsistencies. It is well-tested and in widespread use so your user might already have it cached on their machine.

This answer would be better if it didn't depend on jQuery, which is not listed as apart of this question. — Daedalus, Jan 04 '14 at 06:15
@Daedalus I guess so. jQuery is only there for it's onload function--no significant code-related dependency. You can substitute javascript's window.onload function if it bothers you. Other than that, how to you like the answer--does it add to the discussion? — markE, Jan 04 '14 at 07:00
When you change it, I'll give you an upvote. Otherwise, I don't like the jQuery dependency, as already noted. — Daedalus, Jan 04 '14 at 09:49
@Daedalus: Better? IMHO, I personally don't think of jQuery as a dependency as much as a required fix to browser incompatibility. I rarely deliver a production app without it (...my 2 cents). — markE, Jan 04 '14 at 17:26

score 2 · Accepted Answer · 2014-01-04T09:00:47.293

First step is to wrap your canvases into a container:

<div id="stack">
    <canvas id="bg" width="500" height="500"></canvas>
    <canvas id="lc" width="500" height="500"></canvas>
    <canvas id="rc" width="500" height="500"></canvas>
    <canvas id="ch" width="500" height="500"></canvas>
<div>

then properly apply CSS rules:

#stack {
    position:relative;
    }
#stack > canvas {
    position:absolute;
    left:0;
    top:0;
    }

z-index is not necessary here as the first canvas will be at the bottom etc.

Next is to implement a image loader handler as image loading is asynchronous. This is the reason why your image doesn't show as the image hasn't finished loading before calling drawImage() (at the time the code gets to the "fourth" element the image may be loaded depending on various factors such as cache, system performance etc - but this is in the category "random result":

var bg = document.getElementById('bg').getContext('2d'),
    lc = document.getElementById('lc').getContext('2d'),
    rc = document.getElementById('rc').getContext('2d'),
    ch = document.getElementById('ch').getContext('2d'),
    img = new Image();

img.onload = drawImgs;    /// set handler
img.src = "image.png";    /// set url

function drawImgs() {
    /// 'this' is the loaded image
    bg.drawImage(this, 0,0);
    lc.drawImage(this, 64,64);
    rc.drawImage(this, 128,128);
    ch.drawImage(this, 192,192);

    /// continue rest of code here...
}

If you put your script at the bottom of your page then that's it. If in the header wrap your script in:

window.onload = function() {

    ... code above here...
}

Other considerations is that your image gets loaded properly. For that you can use the onerror and onabort handlers on the image object:

img.onerror = functionToHandleError;
img.onabort = functionToHandleAbort;

also these defined before setting the src property.

score 0 · Answer 3 · answered Jan 04 '14 at 01:22

Canvases can be transparent; I've used this method before. I put up a JSFiddle that you can check to make sure your browser hasn't gone wacky; I'm using the same method you are in your example code, just drawing a square instead of an image. I think the problem is something else.

<canvas id="top" height=100 width=100></canvas>
<canvas id="tall" height=100 width=100></canvas>
<canvas id="short" height=100 width=100></canvas>
<canvas id="bottom" height=100 width=100></canvas>

and JS

var top = document.getElementById("top").getContext("2d");
var tall = document.getElementById("tall").getContext("2d");
var short = document.getElementById("short").getContext("2d");
var bottom = document.getElementById("bottom").getContext("2d");

top.fillRect(0,0,10,10);
tall.fillRect(20,20,10,10);
short.fillRect(40,40,10,10);
bottom.fillRect(60,60,10,10);

To debug, I would just try drawing in each canvas individual, removing the others from your HTML, to make sure that you've got all your references right (it looks like you do.) Then, double-check your CSS and z-index to make sure you're not hiding an element somehow, either by not showing it, or putting its z-index behind another object. Finally, make sure that no other code somewhere is clearing out your canvases, or possibly drawing over your image (if it drew with the same color as your background, it would appear that the canvas was blank, when it was really full of the background color.)

I looked at your code and the canvasses don't seem to be overlapping each other. I need them to be though, I replaced the fillRect() with drawImage() and it did the exact same thing that it always did to me. Even with the fillRects() — user2673553, Jan 04 '14 at 01:33
Sorry, updated Fiddle. Daedalus has a similar and better one, though. Do you see all four squares in both of ours? — Hylianpuffball, Jan 04 '14 at 01:35
I see all the squares AFTER I hit run again, before that it won't show though — user2673553, Jan 04 '14 at 01:41
@user2673553 Like I said, that's a problem with jsfiddle. It works otherwise though. Here's another jsfiddle-like application where it works fine: http://jsbin.com/uxApUgIc/1 — Daedalus, Jan 04 '14 at 01:44
I've tried it on the actual HTML file I have and it only renders one, I also tried it on a chrome extension that runs your code and did the same thing... The only one that's actually worked is js fiddle — user2673553, Jan 04 '14 at 01:47

Stacking multiple canvases in HTML5

3 Answers3

Linked