Making concurrent canvas animations in JavaScript? -

Making concurrent canvas animations in JavaScript? -

i'm learning javascript canvas recently, , came 2 ways of making animations. searched google while cannot determine way correct.

say have want render different objects doing different things on canvas 30 fps. there're 2 ways accomplish this.

for both 2 ways, there should main setinterval function draw objects in 30fps.

every object has nextframe(user_response) method, changes 'status' of object according user response, , called main setinterval 30 times ps. main setinterval need pass user responses each nextframe(...) in way, , calls draw each object. --the problem approach nextframe objects called per frame, taking scheme resources.

objects implement own animation methods withsetinterval. these methos called according user response, changing object 'status' 30 times per second. , main setinterval function calls draw each object in 30fps, behaving 'taking pictures' of each object's status. object statuses alter independently in other threads. there's 1 main thread of 30fps running, , if there're m objects animated , n object not animated @ moment, there're (m+1) threads in total --the problem when many objects animated have many threads running, takes scheme resources.

so, 1 more appropriate method? or both wrong? :> give thanks in advance!

the sec 1 one. except should user requestnextanimationframe instead of setinterval.

to solve problem of resources, can add together conditions in draw() methods avoid redrawing if not necessary. think need redraw each frames because must clear stage in order draw moving objects.

javascript animation canvas