AdamTReineke edited this page Dec 19, 2014 · 9 revisions

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.



Type: Integer Default: 100

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


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.


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)


Type: String Default: click

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


Type: Integer Default: 1

Number of decimals in counter numbers lower than 100.


Type: Integer Default: 60

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


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


Type: String Default: absolute

Value of meter's position CSS property.


Type: Integer Default: 10

Value of meter's z-index CSS property.


Type: String Default: 5px

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


Type: String Default: 5px

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


Type: String Default: auto

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


Type: String Default: auto

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


Type: String Default: 0

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



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.


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.



Type: Boolean Default: 1

Whether to display history graph.


Type: Integer Default: 20

Number of history states to show in graph.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.