Test your screen's FPS

Welcome! This Frame Rate Test is designed to help you observe and tweak various visual parameters (color, size, speed, etc.) while monitoring the FPS (frames-per-second) performance of your browser or device. Please note that all measurements in this FPS Test are approximate and can be influenced by your browser, operating system, and hardware. Use this test as a guideline, not an absolute measurement of your screen’s performance.

How to Interpret Our Frame Rate Test

• Two rectangles traverse the canvas from left to right, then re-enter from the left once they pass the right edge.
• Check for:
  1. Smoothness vs. stutter or jitter.
  2. Frame skipping, which may become apparent at high speeds or lower performance.
  3. Whether changes in size/opacity affect performance.

Warning: The measured FPS and resolution values in this FPS Test may not precisely match your hardware capabilities. Each browser or device imposes its own constraints, so treat these numbers as approximations.

How to Use and Read the Frame Rate Test

Initial Observation

• Watch the rectangles move in this Frame Rate Test. Note if the motion is smooth or choppy.

Try Adjusting Key Settings

• Increase or decrease Speed to see how motion smoothness changes.
• Modify Canvas FPS to limit how often positions update each second.
• Alter Opacity and Colors to see if partial transparency or different shades affect performance.

Monitor “Screen FPS Measured”

• If your measured FPS is consistently below your monitor’s refresh rate (commonly 60Hz), performance might be limited by your browser or hardware.

Look for Performance Changes

• High resolution, big rectangle sizes, or partial transparency might reduce your FPS.
• Watch the “Tool FPS” ratio to see if the test is meeting its own frame targets.

Understanding the Settings of our Frame Rate Test

1. On-Screen Indicators

Screen Resolution

• Displays your screen or browser window’s width × height multiplied by your device pixel ratio.
• Example: A reading of “1920 x 1080” suggests your display is (approximately) 1920 pixels wide by 1080 pixels tall.

Screen FPS Measured

• Shows the estimated frames per second (FPS) being rendered by your browser in this Frame Rate Test.
• A higher number (e.g., 60.00 or 144.00) usually indicates smoother animation.
• A significantly lower number than your monitor’s refresh rate may point to browser limitations or system bottlenecks.

Tool FPS

• Displays the ratio of actual measured FPS to the desired (logical) FPS you set under “Canvas FPS.”
• A value of 1.00 means this FPS Test is running at exactly the requested rate.
  • Values above 1.00 are faster than expected; below 1.00 are slower.

2. Fullscreen & Reset

Fullscreen Button ("⛶")

• Click to switch the Frame Rate Test to fullscreen mode for clearer viewing.
• Press ESC or the same button to exit fullscreen.

Reset Settings

• Click “Reset Settings” to revert everything to default and clear any saved cookie preferences.
• Reloading the page afterward will start this FPS Test with fresh settings.

3. Rectangle Controls

There are two rectangles (Rectangle 1 and Rectangle 2) moving from left to right across the canvas. Each rectangle has the following FPS Test-relevant properties:

A) Color

Color Presets

• Choose from Black, White, Red, Green, Blue, Yellow, Magenta, Cyan.
• The selected color’s label is highlighted with a green border.

B) Size

Width (Default 30px)

• Adjust using – or + in steps of 5px.
• Increasing the width makes the rectangle thicker horizontally.

Height (Default 300px)

• Adjust in 5px increments with – or +.
• Higher values make the rectangle taller; lower values shorter.

C) Opacity

Opacity (Default 100%)

• Ranges from 0% (completely invisible) to 100% (fully opaque).
• Adjust using –/+ in steps of ~5%.

Note: Rectangle 1 and Rectangle 2 have the exact same set of controls. You can differentiate them or make them identical to see if it affects the Frame Rate Test performance.

4. Canvas Background Settings

Background Color Preset

• Similar choices (Black, White, Red, Green, Blue, Yellow, Magenta, Cyan) for the canvas background.

Background Opacity (Default 100%)

• Controls how solid or transparent the background color appears.

5. Additional Controls

Spacing (Default 50px)

• Adjust the horizontal gap between Rectangle 1 and Rectangle 2 in 5px increments.

Speed (Default 250px/s)

• Determines how fast the rectangles move (in pixels per second).
• Higher speeds cause faster motion, making it easier to spot stutter or lag during this FPS Test.

Canvas FPS (Default 1)

• Important: This isn’t your actual screen refresh rate. Instead, it’s how frequently this Frame Rate Test updates the rectangles’ positions each second.
• A higher number (e.g., 2, 3, 4, or 5) means fewer position updates per second (thus a “slower” or more stepwise motion).
• The number to the right (e.g., "100%") is simply 100 / (Canvas FPS value), giving a quick sense of the fraction of full speed.
  • For instance, if you set Canvas FPS to 2, the tool runs at half-speed (50%).

6. Saving & Reloading Preferences

Automatic Saving

• Each change you make to our Frame Rate Test is stored in a browser cookie.
• Returning to this page automatically loads the last-used settings so your FPS Test preferences persist.

Reset

• If you want to start fresh, click “Reset Settings” to clear cookies and reload the defaults.

Enjoy experimenting with different parameters to see how your browser and device handle real-time graphics in this Frame Rate Test! Remember that values here—especially FPS—are rough estimates and might not represent your system’s full capabilities.