Belgeye, örtüşecekleri şekilde 2 Tuvali dinamik olarak nasıl ekleyebilirim?

Question

Benim html, çakışan iki tuval içerir.

<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> 

Ben belgeye javascript iki yeni tuval üzeri ekler ve ilk ikisinden resimleriyle doldurmak istiyorum. Bunu denediğimde, aynı pozisyonu vermeye çalışsam bile, dördüncü tuvalin üçüncü olanın sağına yerleştirildiğini bulmaya devam ediyorum. Aynı sonuçları olan bir div veya paragrafa eklemeye çalıştım.

<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> 

İkinci tuvalim neden ilkinin sağında görünecek?

Aynı sonuca sahip c2.style.position=c1.style.position da denedim.

Answer 1

deneyin div konteyner içinde 2 tuval elemanları sarın o

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