1

I am creating a html5 canvas game and want to check how many frames pass in one second. I have tried using new Date(), and it is not working. How would I manage to do this? javascript template/example:

var fps;
function loop(){
    //some code

    window.requestAnimationFrame(loop);
}
function checkFrameRate(){
    fps = //how long it takes for loop to run
    window.requestAnimationFrame(checkFrameRate);
}
loop();
checkFrameRate

2 Answers 2

2

In the loop function check the time passed between executions.

let lastTime = new Date();
function loop() { 
    const currentTime = new Date();
    // currentTime - lastTime is the number of milliseconds passed from last loop 
    const fps = 1000 / (currentTime - lastTime);
    lastTime = currentTime;
}
1

I would use performance.now() instead of new Date():

let fps;
let requestTime;

function loop(time) {
    if (requestTime) {
        fps = Math.round(1000/((performance.now() - requestTime)));
    }

    console.log(fps);
    requestTime = time;
    window.requestAnimationFrame((timeRes) => loop(timeRes));
}

window.requestAnimationFrame((timeRes) => loop(timeRes));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.