6

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?

Community
  • 1
  • 1
templatetypedef
  • 362,284
  • 104
  • 897
  • 1,065
  • "Without returning control to the browser." Easy fix, see what happens. – Dykam May 16 '11 at 08:51
  • For Mozilla, you can use [JavaScript 1.7's yield operator](https://developer.mozilla.org/en/JavaScript/Guide/Iterators_and_Generators) and repeatedly call `animationGenerator.next()` in a function with help of `setTimeout` / `setInterval` / `mozRequestAnimationFrame`. – Thai May 16 '11 at 09:05
  • Instead of setTimeout/setInterval you should probably use requestAnimationFrame where available. You can find a shim for this purpose here, https://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.). – Juho Vepsäläinen May 16 '11 at 13:01

2 Answers2

5

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.

funkybro
  • 8,432
  • 6
  • 39
  • 52
4

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.

DoXicK
  • 4,784
  • 24
  • 22
  • What might become a problem is latency, I have no clue what priority is assigned to transferring the messages. – Dykam May 16 '11 at 08:52
  • 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)` – tonethar Dec 06 '12 at 19:50