Options

All default options are stored in the FPSMeter.defaults object. You can modify them simply by:

FPSMeter.defaults.graph = 1;

By default, everything except basic FPS display is disabled.

All options can be changed dynamically with .set() method.

Quick reference

FPSMeter call with all default options as defined in the source.

var meter = new FPSMeter({
	interval:  100,     // Update interval in milliseconds.
	smoothing: 10,      // Spike smoothing strength. 1 means no smoothing.
	show:      'fps',   // Whether to show 'fps', or 'ms' = frame duration in milliseconds.
	toggleOn:  'click', // Toggle between show 'fps' and 'ms' on this event.
	decimals:  1,       // Number of decimals in FPS number. 1 = 59.9, 2 = 59.94, ...
	maxFps:    60,      // Max expected FPS value.
	threshold: 100,     // Minimal tick reporting interval in milliseconds.

	// Meter position
	position: 'absolute', // Meter position.
	zIndex:   10,         // Meter Z index.
	left:     '5px',      // Meter left offset.
	top:      '5px',      // Meter top offset.
	right:    'auto',     // Meter right offset.
	bottom:   'auto',     // Meter bottom offset.
	margin:   '0 0 0 0',  // Meter margin. Helps with centering the counter when left: 50%;

	// Theme
	theme: 'dark', // Meter theme. Build in: 'dark', 'light', 'transparent', 'colorful'.
	heat:  0,      // Allow themes to use coloring by FPS heat. 0 FPS = red, maxFps = green.

	// Graph
	graph:   1, // Whether to show history graph.
	history: 20 // How many history states to show in a graph.
});

Options

interval

Type: Integer Default: 100

Time in milliseconds specifying how often should the requestAnimationFrame that renders the meter state be called.

smoothing

Type: Integer Default: 10

When there are FPS or duration spikes, FPSMeter smooths them out. This options specifies the smoothing strength. The higher this value is, the stronger the spikes smoothing gets, but also it takes longer to reflect the current FPS.

Minimum value is 1, which means instant representation of a current FPS frequency without smoothing.

show

Type: String Default: fps

What should the FPSMeter display. Can be:

• fps - frames per second
• ms - duration between frames, or frame rendering duration (when using .tickStart() method)

toggleOn

Type: String Default: click

Name of an event, which when triggered on meter, will toggle between show: 'fps' and show: 'ms'.

decimals

Type: Integer Default: 1

Number of decimals in counter numbers lower than 100.

maxFps

Type: Integer Default: 60

Max expected FPS. This is used in several places, one of which is calculation of graph columns height.

threshold

Type: Integer Default: 100

Maximum duration between frames in milliseconds. When .tick() is not fired within this time, FPSMeter assumes the renderer is paused, and will simulate drop to 0 FPS.

Meter position

position

Type: String Default: absolute

Value of meter's position CSS property.

zIndex

Type: Integer Default: 10

Value of meter's z-index CSS property.

top

Type: String Default: 5px

Value of meter's top CSS property, including units.

left

Type: String Default: 5px

Value of meter's left CSS property, including units.

right

Type: String Default: auto

Value of meter's right CSS property, including units.

bottom

Type: String Default: auto

Value of meter's bottom CSS property, including units.

margin

Type: String Default: 0

Value of meter's margin CSS property, including units. Pass any CSS valid margin, like 10px auto 0 auto.

Theme

theme

Type: String Default: dark

FPSMeter theme. Bundled in are: dark, light, colorful, and transparent.

If you want to build your own theme, read the Theming documentation.

heat

Type: Boolean Default: 0

Allow themes to use heat coloring. Each theme has a different parts onto which it chooses to apply the heat color. Heat means red color when 0 FPS, and green color when maxFps.

Graph

graph

Type: Boolean Default: 1

Whether to display history graph.

history

Type: Integer Default: 20

Number of history states to show in graph.