This question is related to this older one, but I wanted to be sure I had the right answer before I started making major changes to my code.

I'm working on a very putation-intensive JavaScript program that needs to constantly update an image in an HTML5 canvas to draw an animation. As written now, the code draws all the frames of the animation in a tight loop without returning control to the browser, meaning that what's ultimately displayed is just the final frame. I'm pretty sure the only way to fix this is to split the animation code into smaller pieces that can be called reentrantly through a timeout event. Is this correct? Or is there a way to force the canvas to display its contents at a certain point even in the middle of a tight JavaScript loop?

This question is related to this older one, but I wanted to be sure I had the right answer before I started making major changes to my code.

I'm working on a very putation-intensive JavaScript program that needs to constantly update an image in an HTML5 canvas to draw an animation. As written now, the code draws all the frames of the animation in a tight loop without returning control to the browser, meaning that what's ultimately displayed is just the final frame. I'm pretty sure the only way to fix this is to split the animation code into smaller pieces that can be called reentrantly through a timeout event. Is this correct? Or is there a way to force the canvas to display its contents at a certain point even in the middle of a tight JavaScript loop?

• javascript
• html
• canvas
• redraw

• "Without returning control to the browser." Easy fix, see what happens. – Dykam Commented May 16, 2011 at 8:51
• For Mozilla, you can use JavaScript 1.7's yield operator and repeatedly call animationGenerator.next() in a function with help of setTimeout / setInterval / mozRequestAnimationFrame. – Thai Commented May 16, 2011 at 9:05
• Instead of setTimeout/setInterval you should probably use requestAnimationFrame where available. You can find a shim for this purpose here, gist.github./838785 . The nice side of this is that it gives the control back to browser (no need to refresh if not visible etc.). – Juho Vepsäläinen Commented May 16, 2011 at 13:01

2 Answers 2

I'm pretty sure the only way to fix this is to split the animation code into smaller pieces that can be called reentrantly through a timeout event. Is this correct?

This is correct.

Javascript is single threaded, so there's no way for anything else to happen while your logic is being executed. Your only choice is to "emulate" threading by splitting your logic up in to micro-chunks to be executed on timeouts.

You could use webworkers for this if they are available. Just calculate everything you need to do in the webworkers and post the result back when it's done. When you post the message back you can just refresh the image. Calculations will be done in the background and your page only blocks while updating the image.