CODEWITHSUNDEEP
javascripthtmlcanvas
idrumgood
idrumgood

Reputation: 4924

Animating several instances with canvas

jsfiddle here

I'm bored at work today, so I'm just started building something with canvas to try and teach myself some stuff. I've gotten stuck on this portion and have decided to reach out to the SO community instead of banging my head against the wall some more.

The basic idea is to listen for a click and then create a randomly colored circle where the user clicks, animating to a larger size and fading out.

It works great when you just click and let it fade out. The problem comes when you have more than one circle on the canvas at once. I can tell this is happening because of how I'm doing my animating loop, but for the life of me I can't figure out how to do it better.

Should I have an animation loop separate from the setInterval that grows/fades the circles? If so, what should that loop do? I feel like I need to separate the placing/growing/fading of circles from the actual rendering.

EDIT: I've notice this only seems to work in Chrome (maybe safari too)

Upvotes: 1

Views: 93

Answers (1)

ellisbben
ellisbben

Reputation: 6371

The solution is to unify all of your drawing into one place so that your setInterval callback can redraw everything.

Check it out: http://jsfiddle.net/ybcHk/7/

Upvotes: 1

Related Questions