What is the best way to implement animation in js/canvas?

Question

JavaScript

It is clear that you need to use requestanimationframe, but this function is strictly tied to the monitor frequency, i.e. if the monitor is 144hz, then when recursing the requestanimationframe will work 144 times per second, and on ordinary monitors 60-75, it turns out that people with different hertz will see different animation speeds.
Those. if I want to animate some object and shift its position by 150px, changing its position by 1px every requestanimationframe, then for someone the animation will jump in ~1 second, and for someone in ~2.5.
What is the best way to solve this problem?

Answer 1

Animation is tied to time, not step. Each animation frame can last any amount of time. Therefore, it is necessary not to add 1 px each frame, but to check how much time has passed since the previous frame and calculate the new position of the object in space.