Masking effect using HTML5 canvas

Question

Using canvas and mousemove I create a masking effect.

Example: FIDDLE

The masking effect works but on fast scrolling performance isn't ideal.

How can I improve the framerate?

Answer 1

I fixed it simply by using the window mouse coordinates, instead of the listener on the canvas (assuming you want the picture to just be black).

http://jsfiddle.net/gfZ5C/166/

I also changed to requestAnimationFrame, you'll notice a complete FPS difference in the movement of the circle, instead of it moving according to the listener.

window.onmousemove = function (e) {
    circle.posX = e.pageX-can.offsetLeft;
    circle.posY = e.pageY-can.offsetTop;
    circle.hide = (circle.posX >= 550 || circle.posY >= 550) ? true : false;
}
if (!circle.hide) ctx.arc(circle.posX, circle.posY, 70, 0, Math.PI * 2, true);

I left it at 550, so that you could see it actually disappear, you can change it to a big number if you want the circle to just drag right off the canvas.

Also there is no lag on the circle following the mouse now.

Update: Fixed the fiddle so that the circle adjusts for window offset too. The offset is relevant to its parent element, so depending on how far deep your canvas is, you will have to subtract each elements offset that it is inside.

Update : Switched to handle 'onmouse' events, this will work much better on a real site, because mousing over the iFrame doesn't work well, but it still works. Will work 100% as intended on a real site.