onmouseover integrity with animated canvas

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?

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