html - Force HTML5 canvas to redraw while doing heavy JavaScript processing? - Stack Overflow

admin管理员组

文章数量:1355564

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

Share Improve this question Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked May 16, 2011 at 7:43 templatetypedeftemplatetypedef 374k111111 gold badges944944 silver badges1.1k1.1k bronze badges 3

• "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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： htmlForce HTML5 canvas to redraw while doing heavy JavaScript processingStack Overflow