# How to handle the different frame rate on different devices?

I am not quite sure how frame per second works on a web page. I have a Canvas game that involves in moving an image from point A to B, and measuring the time elapsed. The code can be as simple as:

var timeStamp = Date.now();
function update(){
obj.y += obj.speed;
text = "Time: "+ (Date.now() - timeStamp) + "ms";
}


The function update() is called every frame. The problem is that the time elapsed is different from device to device. It is pretty short on my PC, but get longer on my iPad, and is much longer on my cell phone. I thought it is because the FPS is smaller on mobile devices, so instead of calling update() every frame, I call it every 1ms by using a setInterval. But this does not solve the problem.

In my understanding, the function for setInterval is invoked based on the increment in system time, other than frame rate, so it should fix the problem. Am I missing anything here? If the setInterval function is called based on FPS, is there any way to get around with the FPS difference across devices?

On a side note, I have sort of a "water simulator" on the same canvas. It involves in redrawing about 60 objects which can be 600x600 pixels for every frame, so it could be a frame rate killer. I am using Phaser.js but not really using much of its functionalities, if that helps.

• 1000 updates per second is way too much. There is no reason why your update rate should be any higher than the highest FPS you aim for. More than 100FPS is unnecessary for everything, but depending on the game you can sometimes get away with much less. – Philipp Aug 25 '14 at 9:27

As far as I know, is 60 frames per second only, and you don't have access to the delta time. If you want to simulate 30fps for example, you could skip the update() every second frame. Read more here: http://www.html5gamedevs.com/topic/2959-how-to-set-fps-to-30/
By the way, there's no need to calculate frame rate yourself; phaser has the Time class which (when advancedTiming is enabled) has fields like fps, frames, and elapsedSince() for you to monitor the performance of your game.
• game.time.physicsElapsed will tell you how long it has been (in seconds) since the last frame. – J F Jul 4 '17 at 10:47