Methods

FPSMeter has a handful of very useful methods. You can call them directly on a new FPSMeter object:

var meter = new FPSMeter(anchor, options);
meter.hide();

All methods return the current FPSMeter object, unless specified otherwise. This means that you can chain method calls if you want:

var meter = new FPSMeter(anchor, options).hide();
meter.showDuration().show();

Methods

tick

meter.tick();

Marks the end of each frame. This is the method that measures everything.

Returns: this method doesn't return anything.

Example:

// Function that renders one frame
function render() {
	// ... rendering happens here ...
	meter.tick();
}

tickStart

meter.tickStart();

Marks the beginning of each frame. .tick() than uses this time to measure the rendering duration of each frame. This method is optional, and if omitted, .tick() will measure the duration between frames instead.

Returns: this method doesn't return anything.

Example:

// Function that renders one frame
function render() {
	meter.tickStart();
	// ... rendering happens here ...
	meter.tick();
}

showFps

meter.showFps();

Changes the meter to display FPS.

showDuration

meter.showDuration();

Changes the meter to display duration between frames, or frame rendering duration when using .tickStart() method.

toggle

meter.toggle();

Toggles between showFps amd showDuration.

pause

meter.pause();

Pauses the meter rendering. FPSMeter still continues to measure everything, just the meter element rendering is paused.

resume

meter.resume();

Resumes the paused rendering.

hide

meter.hide();

Pauses the rendering, and hides the FPSMeter element.

show

meter.show();

Shows the FPSMeter element, and resumes the rendering.

set

meter.set( name, value );

Updates an option value, and when needed, repositions or reloads the meter element.

• name - name of the option to be updated
• value - new option value

All options from Options documentation can be updated dynamically. Example:

// Changes theme to 'colorful'
meter.set('theme', 'colorful');
// Hides the graph
meter.set('graph', 0);

destroy

meter.destroy();

Pauses rendering, unbinds events, removes the element from DOM, and stops listening to ticks.

Returns: This method doesn't return anything, because fuck you, y u destroying me?