Placing two canvases on top of eachother CSS
I am trying to position 2 canvases on the same side of each other, and at the same time with them centered like this, but I suspect one canvas is coming out of frame.
CSS
body { background-color: #000000; text-align: center; margin: 0px; padding: 0px; width:100%; height:100%; }
* { margin:0; padding:0; }
canvas { display:block; padding: 0; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
cnv1 { z-index: 2; }
cnv2 { z-index: 1; }
HTML:
<canvas id="cnv1">U no do HTML5, fix.</canvas>
<canvas id="cnv2">U no do HTML5, fix.</canvas>
JavaScript:
var cnv = document.getElementById('cnv1')
var ctx = cnv.getContext('2d');
var cnv2 = document.getElementById('cnv2')
var ctx2 = cnv2.getContext('2d');
If I try now to write things like
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText('images loaded and ready to go', 180, 45);
then it will not appear. but there will be an entry in ctx2.
+3
source to share
2 answers
Is it something like this you need? The back layer and front layer now overlap. The only thing I had to do for this was to reverse the order in which they appear in the html.
I don't know why the z-index was not working / not executing. But reversing their appearance order worked well.
var cnv = document.getElementById('cnv1')
var ctx = cnv.getContext('2d');
var cnv2 = document.getElementById('cnv2')
var ctx2 = cnv2.getContext('2d');
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText('images loaded and ready to go', 25, 95);
ctx2.save();
//ctx2.globalAlpha = 0.5;
ctx2.clearRect(0,0,ctx2.width,ctx2.height);
ctx2.fillStyle="#eeeeee";
ctx2.fillRect(0,0,50,200);
ctx2.fillRect(50,50,50,150);
ctx2.fillRect(100,0,25,200);
ctx2.fillRect(150,50,50,150);
ctx2.fillStyle="#202020";
ctx2.fillText('Gotham City.', 20, 128);
body {
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
width:100%;
height:100%; }
* {
margin:0;
padding:0;
}
canvas {
display:block;
padding: 0;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color:transparent;
}
#cnv1 {
z-index: 2;
}
#cnv2 {
z-index: 1;
}
<canvas id="cnv2">U no do HTML5, fix.</canvas>
<canvas id="cnv1">U no do HTML5, fix.</canvas>
0
source to share