Canvas - Good practices?

Question

Hi there,
I'm writting my first canvas code and after some headach I'm finally closing to my final target but my script start to slow down the animation. That's why I want to ask if you guys know some common tips to increase framerates?

Answer 1

window.requestAnimationFrame()
This method may help you.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

Answer 2

Oh thanks I didn't see this one, I'll try it and tell you the result!

Answer 3

Hi K.C Leung, I have test your suggestion and I didn't see any better but I understand your advice is the good one, people recommend your idea everywhere but I think I have been to far in my program and would need to change my animation system (setInterval mixed with a system to manage F.P.S depending params settings). By the way I found what dropped my frame per seconds so low... shadow blur propriety! I turned off that and I have been able to display 60 times more geometric shapes compare with before!

Answer 4

context.beginPath();
and clearRect();
usually you don't need to re-draw all area of the canvas everytime. I think it can improve the performance.

And there is some advice for optimize
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas