Multiple canvas as layers

Question

I am using multiple canvas in an html page as layers as in html5 - canvas element - Multiple layers but I am experiencing some problems. If I draw them

<canvas id="overlay"></canvas>
<canvas id="widget"></canvas>

I see all the drawings and there are no problems but if swap them

<canvas id="widget"></canvas>
<canvas id="overlay"></canvas>

Then I only see the "widget" canvas. at the moment the drawing code is fairly simple.

// overlay 
ctx.clearRect(0, 0, overlay.width, overlay.height);
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(0, 200);
ctx.stroke();

// widget
ctx.clearRect(0, 0, widget.width, widget.height);

has anyone encountered this problem? Am I doing something wrong?

Why not just use a third party library such as Kinetic that take care of this stuff for you? — garryp, May 18 '15 at 12:27

score 0 · Answer 1 · answered May 18 '15 at 12:34

I just found it out. The problem was in another piece of code. I was drawing on the overlay only on 'mousemove' event but I was listening on the widget mousemove event

// WRONG: widget.addEventListener('mousemove', drawOverlay);
overlay.addEventListener('mousemove', drawOverlay);

so when the widget was in the back the mouse move event was not dispatched.

Multiple canvas as layers

1 Answers1