Canvas Animation Frame Rendering: Infinite Loop Vs. Triggering On Mousemover()

Ok, this is very theoretical question: I am coding an animation with the HTML5 canvas element. The animation is dependent on the mouse moving (when mouse rests = no animation). Fo

Solution 1:

I use a combination of both.

I have 2 global variables (mousex,mousey) I update these on mousemove

And i have a draw loop that start on load and repeast every ,n-seconds

Edit: the idea is to split the visual and the working code (collision,score,...)

The drawing loop fires every 2 sec while the mousemove is updated on everymove

-the loop is that set so slow becaus it show the diffrence example : jsfiddle.net/9jW3d/show/``

Solution 2:

I'd go for option 2. Option 1 is just waste of resources. Don't worry about option 2 overlapping iterations. The DOM doesn't call a mousemove event when the previous one is still running.