Force HTML5 canvas to redraw while doing heavy JavaScript processing?

Question

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 computation-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?

Eddie

"Without returning control to the browser." Easy fix, see what happens. – Bela

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. – Wisdom

Instead of setTimeout/setInterval you should probably use requestAnimationFrame where available. You can find a shim for this purpose here, gist.github.com/838785 . The nice side of this is that it gives the control back to browser (no need to refresh if not visible etc.). – Colwen

Answer 1

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.

Musil

Answer 2

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.

Fcc

What might become a problem is latency, I have no clue what priority is assigned to transferring the messages. – Bela

Using a webworker in conjunction with an offscreen canvas could also help. You can update an offscreen canvas on a web worker thread, call back to the main thread periodically, then call ctx.drawImage(offScreenCanvas,0,0,height,width) – Jecho