I am currently working on a HTML5 Canvas and JavaScript game. Initially, the frames per second (fps) are decent, but as the game progresses, the fps starts decreasing. It usually starts at around 45 fps and drops to only 5 fps.
Here is my current game loop:
var last_draw = Date.now(); //Keeps track of when GameDraw was last called
var fps;
function gameloop()
{
var elapsed = Date.now() - last_draw;
last_draw = Date.now()
fps = 1000 / elapsed;
context.clearRect(0, 0, canvas.height, canvas.width); //Clears the canvas
GameUpdate();// Update properties of game elements
GameDraw(); //Draw all visible elements in the canvas
window.requestAnimationFrame(gameloop); //Request next frame
}
window.requestAnimationFrame(gameloop);
I have tested this game in the following browsers:
- Mozilla Firefox 32.0.3
- Google Chrome 38.0.2125.101 m
My questions are:
- Why does requestAnimationFrame (rAF) call less frequently as the game progresses?
- Could it be due to a memory leak?
- Is high execution time for GameDraw and GameUpdate causing this issue?
- Is the time taken to execute GameDraw function different from the actual time it takes to draw elements on the canvas? The GameDraw function calls the draw function for each game element.