onmouseover integrity with animated canvas

Question

I am having issues with my event handlers as they interact with a canvas. essentially what happens is the canvas UNDERNEATH the canvas with the event handler is somehow affecting the canvas above it, and breaking the event sometimes.

I am using an onmouseover event to hide the upper canvas and onmouseout to reshow the element. note that i get the same effect with onmousemove.

I have transposed my code into a jsfiddle: http://jsfiddle.net/morgaman/zPuH8/ ...but frustratingly it doesn't run. So, the working version -per se- is hosted live here: http://chrismorga.com/rainnav/rbowtester.html.

I have heard of "jCanvas" ( http://calebevans.me/projects/jcanvas/index.php ) being the jQuery answer to my problems, but I don't know how to program it or make a recursive animation work. Help?

Answer 1

Give your div that holds myCanvasL2 the same height and width as the canvas. Otherwise it will adjust its size to the canvas, and when its set to not display, it will call mouseout since its height will essentially be 0.

Working Version

<div style="z-index:1; position: absolute; left: 18%; top:50px;width:800px;height:50px;" 
    onmouseover="document.getElementById('myCanvasL2').style.display = 'none';"
    onmouseout="document.getElementById('myCanvasL2').style.display = 'block';">
        <canvas id="myCanvasL2" width="800" height="50"></canvas>
</div>​

Answer 2

Loktar's got a great answer here, but I'm really curious as to exactly what you're doing.

Life would be a lot easier for you going forward if you kept the two canvases always the same size and always in the same order and only ever put event handlers on the top canvas.

If you need to "hide" one of the two canvases, do so by clearing it completely (clearRect, yada yada).

When that canvas is cleared if you need to interact with the canvas below it, keep a flag topCanvasCleared or something, and while it is true any events you get on the top canvas you can pass on to a function that acts on the second canvas as if the event originated from it. Since they are the same size it ought to work perfectly.

...but do you really need two canvases here? What's the end goal? Why can't you have one canvas that displays two very distinct states at different times instead? Life would be reeeally much easier if you just had one DOM element to worry about from the get-go. It's certainly not hard to have all the functionality you've got so far in just one canvas.

I think the solution here is a reorganization of what you've got so far to be just one canvas or at most two canvases that never change shape or size or visibility, with event handlers only on the topmost one. I urge you to give those two ideas some thought.