CODEWITHSUNDEEP
javascripthtmlcanvas
Jesse W. Collins
Jesse W. Collins

Reputation: 139

How do I dynamically append 2 Canvases to the document such that they overlap?

My html includes two overlapping canvases.

<canvas id="imCanvas" style="z-index: 1; position: absolute; left:0px; top:0px;" width="512" height="512"></canvas>
<canvas id="mouseCanvas" style="z-index: 2; position: absolute; left:0px; top:0px;" width="512" height="512"></canvas>

I want to append via javascript two new canvases to the document and fill them with the images from the first two. When I attempt this, I keep finding the fourth canvas is positioned to the right of the third one, even if I try to give them the same position. I've tried appending to a div or a paragraph with the same results.

<script type="text/javascript">
function handleAppendData() {
    var appendDataP=document.getElementById("appendDataP");
    var c1=document.createElement('canvas');
    var c2=document.createElement('canvas');
    c1.style="z-index: 1";
    c2.style="z-index: 2; position: absolute; left:0px;";
    c1.width=512;
    c1.height=512;
    c2.width=512;
    c2.height=512;
    var canvas = document.getElementById('imCanvas');
    var mousecanvas = document.getElementById('mouseCanvas');
    var ctx1=c1.getContext('2d');
    var ctx2=c2.getContext('2d');
    ctx1.drawImage(canvas,0,0);
    ctx2.drawImage(mousecanvas,0,0)
    appendDataP.appendChild(c1);
    appendDataP.appendChild(c2);
}
</script>

Why is my second canvas appearing to the right of the first?

I've also tried c2.style.position=c1.style.position with the same result.

Upvotes: 1

Views: 194

Answers (1)

Nick Rassadin
Nick Rassadin

Reputation: 900

Try to position first canvas as absolute and second as relative, like that

c1.style.zIndex=1; c1.style.position="absolute";
c2.style.zIndex=2; c2.style.position="relative";

Upvotes: 1

Related Questions