Calculate FPS in Canvas using requestAnimationFrame

Question

How could I calculate the FPS of a canvas game application? I\'ve seen some examples, but none of them use requestAnimationFrame, and im not sure how to apply their solution

Answer 1

I was missing an implementation that allows to customize the size of the sample for the averaged FPS value. Here is mine , it has the following features :

• Accurate : performance.now() based
• Stabilized : Returned FPS value is an averaged value ( fps.value | fps.tick() )
• Configurable : FPS samples array size can be customized ( fps.samplesSize )
• Efficient : Rotatory array for collecting samples (avoids array resizing)

const fps = {
    sampleSize : 60,    
    value : 0,
    _sample_ : [],
    _index_ : 0,
    _lastTick_: false,
    tick : function(){
        // if is first tick, just set tick timestamp and return
        if( !this._lastTick_ ){
            this._lastTick_ = performance.now();
            return 0;
        }
        // calculate necessary values to obtain current tick FPS
        let now = performance.now();
        let delta = (now - this._lastTick_)/1000;
        let fps = 1/delta;
        // add to fps samples, current tick fps value 
        this._sample_[ this._index_ ] = Math.round(fps);
        
        // iterate samples to obtain the average
        let average = 0;
        for(i=0; i

--