Drawing to second canvas cancels the first canvas

Question

I have two canvases which are on top of each other using z-index. But I am getting a weird problem with them: when I draw to the canvas that is `above` the lower canvas, what ever was drawn on the lower canvas gets erased. This is how i have done it: CSS: ``` .c { position: absolute; left: 0; top: 0; width: 100 % ; height: 500px; margin: 0 auto; border: 1px solid red; } ``` JavaScript: ``` window.canvas = new Object(); for (var i = 1; i < 3; i++) { document.getElementById("G").innerHTML += '

'; temp = document.getElementById('layer' + i); objname = 'canvas' + i; canvas[objname] = temp; canvas[objname].ctx = temp.getContext("2d"); } function draw() { canvas.canvas1.ctx.clearRect(0, 0, settings.width, settings.height); canvas.canvas2.ctx.clearRect(0, 0, settings.width, settings.height); abposx = 50; abposy = 50; //doesn't draw canvas.canvas1.ctx.drawImage(gfx['ground'][0], abposx, abpo…

Accepted Answer

Look at this: ``` document.getElementById("G").innerHTML += '

'; ``` It is like: ``` el.innerHTML += '...'; ``` So ``` el.innerHTML = el.innerHTML + '...'; ``` Now you probably understand why your code does not work: when you do such thing in the loop second time it clears `innerHTML` in `#G` element, and update it, and build DOM again, so the context for drawing of the first canvas is dead. Use DOM instead of innerHTML. Demo: http://jsfiddle.net/mQuWF/

Drawing to second canvas cancels the first canvas

Solution

Problem

Related problems