Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I have followed the best practices to draw a simple animation using requestAnimFrame :
http://jsfiddle.net/paul/XQpzU/2/light/
Unfortunately the animation has lags even on this example (on Chrome, Firefox and IE).
The explanation of the source code is there : http://paulirish.com/2011/requestanimationframe-for-smart-animating/
What is the solution do display a simple animation in html5 without any slow down?
Use double buffer technique for complex animations to avoid slow functions like save, restore and so on.
Good article
http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/
“requestAnimFrame” will not give you performance boost, because in this case browser decides whether to render your code in the certain time, not you. My experience shows that its better to set timer for the required FPS. I had bad experience when wrote the game using PhoneGap for Android. I tried various techniques and the best was to use two canvases, to reuse paths and avoid slow transformation functions.