### Install fpsObserver via NPM (Bash)

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Provides the command to install the fpsObserver library using the npm package manager. This is a common method for adding the library to a project.

```bash
$ npm install fps-observer -s
```

--------------------------------

### Visualizing FPS with HTML5 Canvas

Source: https://context7.com/colxi/fps-observer/llms.txt

This example demonstrates how to create a real-time performance graph by sampling data from the fps-observer instance and rendering it to a canvas element.

```javascript
import { fpsObserver } from 'fps-observer';

const canvas = document.getElementById('graph');
const ctx = canvas.getContext('2d');
const fpsDisplay = document.getElementById('currentFPS');

const fps = new fpsObserver();
const samples = new Array(10).fill(0);
const graphInterval = 1000; // Collect sample every second

function drawGraph() {
    fpsDisplay.textContent = fps.value + ' fps';
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = '#AAAAAA';
    ctx.strokeRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(0, canvas.height - samples[0]);

    const distance = canvas.width / (samples.length - 1);

    for (let i = 1; i < samples.length; i++) {
        const height = canvas.height - samples[i];
        ctx.arc(distance * i, height, 2, 0, 2 * Math.PI);
        ctx.lineTo(distance * i, height);
        ctx.stroke();

        if (i < samples.length - 1) {
            ctx.fillText(samples[i], (distance * i) - 5, height - 10);
        }
    }

    requestAnimationFrame(drawGraph);
}

setInterval(() => {
    samples.push(fps.value);
    samples.shift();
}, graphInterval);

drawGraph();
```

--------------------------------

### Create FPS Observer Instance (JavaScript)

Source: https://context7.com/colxi/fps-observer/llms.txt

Demonstrates how to create a new FPS Observer instance in both automatic (default) and manual modes. It also shows how to access the current FPS value.

```javascript
import { fpsObserver } from 'fps-observer';

// Create observer in automatic mode (default)
const fps = new fpsObserver();

// Create observer in manual mode
const manualFps = new fpsObserver(false);

// Access current FPS value at any time
console.log('Current framerate:', fps.value, 'fps');
```

--------------------------------

### Configure Sample Size (JavaScript)

Source: https://context7.com/colxi/fps-observer/llms.txt

Demonstrates how to adjust the `sampleSize` property to control the number of frames used for averaging FPS. It also shows error handling for invalid values.

```javascript
import { fpsObserver } from 'fps-observer';

const fps = new fpsObserver();

// Use fewer samples for faster response (more jittery)
fps.sampleSize = 10;

// Use more samples for smoother readings (slower response)
fps.sampleSize = 120;

// Invalid values throw an error
try {
    fps.sampleSize = -1; // Throws Error
} catch (e) {
    console.error(e.message);
    // "FPS.sampleSize[SET] : Invalid value provided. Only Integer Numbers greater than 0 are allowed."
}
```

--------------------------------

### Constructor: new fpsObserver()

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Initializes a new instance of the fpsObserver to track framerate data.

```APIDOC
## Constructor: new fpsObserver(autoMode)

### Description
Creates and initializes a new observer instance to track framerate.

### Parameters
- **autoMode** (Boolean) - Optional - Sets the status of the automatic mode. Defaults to true.

### Returns
- **fpsObserver** (Object) - A new instance object containing framerate monitoring methods and properties.
```

--------------------------------

### Initialize and Use fpsObserver in Manual Mode (JavaScript)

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Shows how to initialize the fpsObserver, disable automatic mode, and manually trigger ticks within an animation loop to log the framerate. This is useful for custom loop control.

```javascript
import {fpsObserver} from './fps-observer.is';

let myAnimationFPS = new fpsObserver();
myAnimationFPS.auto = false; // disable auto mode

// create an animation loop 
function myLoop(){
    myAnimationFPS.tick(); // trigger a new tick
    console.log( 'Framerate :' , myAnimationFPS.value );

    /* perform your canvas drawing... */

    requestAnimationFrame( myGameLoop );
};
myLoop();
```

--------------------------------

### Properties and Methods

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Details on the properties and methods available on the fpsObserver instance.

```APIDOC
## Properties and Methods

### Properties
- **value** (Number) - The current averaged framerate value.
- **auto** (Boolean) - Enables or disables automatic mode. Default is true.
- **sampleSize** (Integer) - The number of samples to collect for averaging the FPS. Default is 30.

### Methods
- **reset()** - Resets the internal sample collection. Useful when resuming a paused loop.
- **disconnect()** - Disables the observer.
- **tick()** - Manually triggers a new tick for the observer when automatic mode is disabled.
```

--------------------------------

### Initialize and Use fpsObserver in Automatic Mode (JavaScript)

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Demonstrates how to initialize the fpsObserver in automatic mode and use it within an animation loop to log the framerate. The observer automatically tracks FPS based on requestAnimationFrame.

```javascript
import {fpsObserver} from './fps-observer.is';

let myAnimationFPS = new fpsObserver();

// create an animation loop 
function myLoop(){
    console.log( 'Framerate :' , myAnimationFPS.value );
    
    /* perform your canvas drawing... */
    
    requestAnimationFrame( myGameLoop );
};
myLoop();
```

--------------------------------

### Include fpsObserver via CDN (HTML)

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Demonstrates how to include the fpsObserver library in an HTML document using a CDN link. Note that this method is not recommended for production environments.

```html
<script src="https://colxi.info/fps-observer/src/main.js"></script>
```

--------------------------------

### Clone fpsObserver from GitHub (Bash)

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Shows the command to clone the fpsObserver repository directly from GitHub using Git. This allows access to the source code and version history.

```bash
$ git clone https://github.com/colxi/fps-observer
```

--------------------------------

### Toggle Auto Mode at Runtime (JavaScript)

Source: https://context7.com/colxi/fps-observer/llms.txt

Shows how to switch the FPS Observer between automatic and manual modes at runtime using the `auto` property. It also notes that sample collection is reset when switching modes.

```javascript
import { fpsObserver } from 'fps-observer';

const fps = new fpsObserver(); // Starts in auto mode

// Check current mode
console.log('Auto mode:', fps.auto); // true

// Switch to manual mode
fps.auto = false;

// Now you must call tick() in your loop
function renderLoop() {
    fps.tick();
    render();
    console.log('FPS:', fps.value);
    requestAnimationFrame(renderLoop);
}

// Switch back to auto mode
fps.auto = true;
// No need to call tick() anymore
```

--------------------------------

### Initialize and Visualize FPS Observer

Source: https://github.com/colxi/fps-observer/blob/master/test/index.htm

This snippet initializes the fpsObserver class to track frame rates and uses a requestAnimationFrame loop to render the data onto an HTML5 Canvas. It includes logic to manage a sample array and draw a line graph representing the FPS fluctuations over time.

```javascript
import {fpsObserver} from '../src/fps-observer.js';
let currentFPS = document.getElementById('currentFPS');
let graph = document.getElementById('graph').getContext('2d');
let myObserver = new fpsObserver();
let graphInterval = 1000;
let samples = Array(10).fill(0);

function myLoop() {
  currentFPS.innerHTML = myObserver.value + ' fps';
  graph.clearRect(0, 0, graph.canvas.width, graph.canvas.height);
  graph.strokeStyle = "#AAAAAA";
  graph.font = "10px Arial";
  graph.strokeRect(0, 0, graph.canvas.width, graph.canvas.height);
  graph.beginPath();
  graph.moveTo(0, graph.canvas.height - samples[0]);
  let distance = graph.canvas.width / (samples.length - 1);
  for (let i = 1; i < samples.length; i++) {
    let height = graph.canvas.height - samples[i];
    graph.arc(distance * i, height, 2, 0, 2 * Math.PI);
    graph.lineTo(distance * i, height);
    graph.stroke();
    if (i < samples.length - 1) {
      graph.fillText(samples[i], (distance * i) - 5, height - 10);
    }
  }
  requestAnimationFrame(myLoop);
}
myLoop();

setInterval(() => {
  samples.push(myObserver.value);
  samples.shift();
}, graphInterval);
```

--------------------------------

### fpsObserver Constructor Syntax (JavaScript)

Source: https://github.com/colxi/fps-observer/blob/master/README.md

Defines the constructor syntax for creating a new fpsObserver instance, specifying the optional autoMode parameter to control automatic framerate tracking.

```javascript
new fpsObserver( autoMode );
```

--------------------------------

### Manual Mode with tick() Method (JavaScript)

Source: https://context7.com/colxi/fps-observer/llms.txt

Explains how to use the `tick()` method in manual mode to record each frame of a custom animation loop, providing FPS measurements specific to that loop.

```javascript
import { fpsObserver } from 'fps-observer';

const fps = new fpsObserver();
fps.auto = false; // Switch to manual mode

function myAnimationLoop() {
    // Call tick() at the start of each frame
    fps.tick();

    // Your animation/rendering code
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawScene();

    console.log('Animation FPS:', fps.value);

    requestAnimationFrame(myAnimationLoop);
}

myAnimationLoop();
```

--------------------------------

### Read FPS Value Periodically (JavaScript)

Source: https://context7.com/colxi/fps-observer/llms.txt

Shows how to periodically read the current averaged framerate from an FPS Observer instance using the `value` property. Includes a warning for low framerates.

```javascript
import { fpsObserver } from 'fps-observer';

const fps = new fpsObserver();

// Poll the FPS value periodically
setInterval(() => {
    console.log(`Framerate: ${fps.value} fps`);

    if (fps.value < 30) {
        console.warn('Low framerate detected!');
    }
}, 1000);
```

--------------------------------

### Automatic Mode Animation Loop (JavaScript)

Source: https://context7.com/colxi/fps-observer/llms.txt

Illustrates using FPS Observer in automatic mode to measure the global browser framerate. The `value` property is read directly to display FPS in a game UI.

```javascript
import { fpsObserver } from 'fps-observer';

const fps = new fpsObserver(); // auto mode enabled by default

function gameLoop() {
    // Display FPS in your game UI
    document.getElementById('fps-counter').textContent = fps.value + ' fps';

    // Your game rendering logic here
    renderGame();

    requestAnimationFrame(gameLoop);
}

gameLoop();
```

--------------------------------

### Resetting the FPS Observer State

Source: https://context7.com/colxi/fps-observer/llms.txt

The reset method clears collected samples and resets the internal state. This is essential when resuming an animation loop after a pause to prevent stale data from skewing performance metrics.

```javascript
import { fpsObserver } from 'fps-observer';

const fps = new fpsObserver();
let isPaused = false;

function gameLoop() {
    if (isPaused) return;

    renderGame();
    document.getElementById('fps').textContent = fps.value;

    requestAnimationFrame(gameLoop);
}

function pauseGame() {
    isPaused = true;
}

function resumeGame() {
    isPaused = false;
    fps.reset(); // Clear stale samples before resuming
    gameLoop();
}

gameLoop();
```

--------------------------------

### Disconnecting the FPS Observer

Source: https://context7.com/colxi/fps-observer/llms.txt

The disconnect method permanently stops the observer from updating. This is used for resource cleanup when performance monitoring is no longer required.

```javascript
import { fpsObserver } from 'fps-observer';

const fps = new fpsObserver();

// Monitor FPS for 10 seconds then stop
setTimeout(() => {
    console.log('Final FPS reading:', fps.value);
    fps.disconnect();
    console.log('Observer active:', fps.active); // false
}, 10000);

// Check if observer is still active
if (fps.active) {
    console.log('Current FPS:', fps.value);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.