4

I’ve got a page with layered <canvas> elements like explained in the answer here. The canvases together make up an animation, so each is cleared and redrawn as necessary.

Now I'm trying to incorporate requestAnimationFrame by using the cross browser shim. But I don’t really know what requestAnimationFrame is doing behind the scenes.

Is it okay to have it update multiple canvases in each loop? Should each canvas have its own loop? Is the answer browser dependent?

Community
  • 1
  • 1
Ritchie
  • 1,123
  • 2
  • 8
  • 8

4 Answers4

6

Updating all the canvases in a single requestAnimationFrame is perfectly okay.

If the canvases are independent from each other and appear on different sections of the page, then you might want to use individual requestAnimationFrame handlers, passing the canvas element as the second argument. That way, only the currently visible canvases get updated. (Passing an element as the second argument is WebKit-specific, though.)

What requestAnimationFrame does is tell the browser that you would like to update the appearance of the page. The browser calls the callback when the page or element is next up for a redraw. And that’s going to happen when the page/element is visible, and never more often than the screen refresh rate.

Zearin
  • 1,474
  • 2
  • 17
  • 36
Ilmari Heikkinen
  • 2,711
  • 1
  • 19
  • 14
3

Using requestAnimationFrame simply lets the browser control when reflows/repaints on the page happen.

It would be better to alter all the canvases in one callback, so the browser can repaint them in one go.

This explanation of requestAnimationFrame was pretty helpful

Zearin
  • 1,474
  • 2
  • 17
  • 36
Divya Manian
  • 1,927
  • 11
  • 16
1

The shim merely falls back to a timer if it is not available.

You should be fine. Update all of them in the same single loop.

requestAnimFrame isn't "tied" to a canvas or anything, just the function you pass it. So you can use it with three canvases or zero canvases just fine.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
0

use canvas in this format js file so RequestAnimationFrame for multiple canvas will work

(function(){ ... })();
shankaresh
  • 1
  • 1
  • Can you please add an explanation to your answer? Why does using the code you provided work and what is the problem? – MkMan Sep 20 '20 at 22:12
  • This helps system to know it is a set of code another is different. Example: doing maths 2+2×2 , some might get confused. So, to have clear understanding. People do 2+(2×2). () Is the key, for where to start and end. The same 'empty function' syntax (function(){ ... })(); Is used for it. – shankaresh Nov 09 '22 at 19:11