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 += '<canvas id="layer' + i + '" class="c" style="z-index:' + i + ';" oncontextmenu="return false;"></canvas>';
  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, abposy);

  //draws
  canvas.canvas2.ctx.drawImage(gfx['building'][0], abposx + 120, abposy + 120);
}

In the above example, I only see canvas2 drawn, if I remove that canvas all together I then see canvas1 drawn. Both images also show if I draw both images to the same canvas.

BUT if I draw one to canvas1 and the other to canvas2 I ONLY see what is drawn on canvas2, and canvas1 appears to be erased.

Why might this be ? I don't know if this is replicated for any one else trying this but its getting annoying! I cannot solve the issue! Ideas/suggestions/fixes are much appreciated.

JSfiddle with the issue: http://jsfiddle.net/xJZrQ/18/

why are you drawing on two canvases? Also, can you please provide a JSFiddle example? — ahren, Dec 10 '12 at 03:24
@eicto http://jsfiddle.net/xJZrQ/18/ it doesn't want to draw at all for me on jsfiddle. — Sir, Dec 10 '12 at 03:35
You're a genius! Assuming your answer fixes the problem :P I will await! :) — Sir, Dec 10 '12 at 03:42
Do not use `innerHTML` with `+=`. Never. http://stackoverflow.com/a/2305677/1048572 — Bergi, Dec 10 '12 at 03:47

Danil Speransky · Accepted Answer · 2012-12-10T04:03:24.267

3

Look at this:

document.getElementById("G").innerHTML += '<canvas id="layer'+i+'" class="c" style="z-index:'+i+';" oncontextmenu="return false;"></canvas>';

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/

edited Dec 10 '12 at 04:03

answered Dec 10 '12 at 03:45

Danil Speransky

29,891
5
68
79

So I just need to do `document.getElementById("G").innerHTML + //etc` ? – Sir Dec 10 '12 at 03:49
@Dave you need to create element using `document.createElement('canvas')` – zb' Dec 10 '12 at 03:50
How would I think assign the ID `"layer"+i`can you show script example in answer? – Sir Dec 10 '12 at 03:51
Yeh im just stuck on one final thing lets say I don't set a width and height (as its set in CSS) how can get the canvas width and height in JS ? I tried = `settings.width = document.getElementById('layer'+i).clientWidth;` Didn't work though. – Sir Dec 10 '12 at 04:16
What i was planning to do was get the CSS dimensions and set the canvas dimensions with JS ? - that can be done right? – Sir Dec 10 '12 at 04:25
I don't follow.. currently the width height = "0" for both so nothing draws :( – Sir Dec 10 '12 at 04:46
I tried using the div dimensions the canvas is placed inside to set the canvas dimensions but that still shows "0" "0" like this : http://pastebin.com/vqqtBDsH – Sir Dec 10 '12 at 04:51

Drawing to second canvas cancels the first canvas

1 Answers1