Canvas Performance Test

What Is a Canvas Performance Test?

A Canvas Performance Test measures how a browser handles a repeatable graphics workload. This upgraded tool renders animated shapes in a fixed 640 × 360 drawing area using your selected API: main-thread Canvas 2D, WebGL, or (if supported) 2D drawing inside an OffscreenCanvas worker. It measures observed animation callback intervals, how long JavaScript spends issuing drawing commands, and the number of shape commands or point sprites actually submitted during measured intervals. It does not claim to measure GPU-completed pixels or provide a universal graphics score.

How to Use the Canvas Performance Test

1. Choose the rendering API: select Canvas 2D for everyday 2D performance, WebGL for the GPU-backed point-sprite path, or OffscreenCanvas 2D (worker) to see how 2D drawing behaves off the main UI thread. Unsupported modes report an error rather than generating pretend results.
2. Pick the shape workload: Light (150), Standard (450), or Heavy (900). Keep the same workload, mode, browser window and display setup when comparing repeat runs.
3. Choose repeatability: three 2-second measured trials for a quick test, or five for more observations. The tool first performs a 400 ms warm-up and then begins collecting timing data.
4. Press Start Benchmark: keep the tab visible and do not resize the window during the run. The preview will display actual submitted drawing work, and the progress indicator will update.
5. Read the results: inspect observed FPS, submitted shapes/second, median/p95 API submission time, separate trial FPS readings and the rough confidence interval. FPS is limited by browser scheduling and display refresh; higher is not automatically better if already refresh-capped.
6. Verify controls: Stop aborts without awarding a partial score, Reset clears the report, Copy Report uses the browser clipboard if permitted, and Download JSON saves measured results locally. Repeat identical runs to assess variation.

How It Works

The scene uses repeatable seeded shape positions, velocities and colors. Main-thread Canvas 2D calls fillRect() once for every animated shape per measured frame. WebGL submits the positions/colors as a buffer and draws the same number of point sprites in a batched drawArrays(POINTS) call. Worker mode builds the same nominal 2D scene with OffscreenCanvas and sends occasional preview bitmaps to the page. The visual workloads are similar in object count but the APIs and submission costs are fundamentally different.

Frame pacing comes from consecutive positive requestAnimationFrame timestamps; draw-submission durations come from performance.now() around the rendering commands. The submitted shapes/second metric uses the accumulated number of shapes submitted on valid measured intervals divided by their actual observed duration, not a single snapshot multiplied by an instantaneous FPS. The estimated 95% confidence interval uses Student's t on 3 or 5 measured trial FPS values and should be interpreted only as a small-sample repeatability indicator, not a guarantee or exact hardware rating.

Understanding Your Results

• Observed frames/second: the frequency of animation callbacks during the sampled intervals, not confirmed physical monitor refresh frequency or display-present timestamps.
• Submitted shapes/second: actual workload items handed to the rendering API per observed second. With WebGL, multiple point sprites are submitted by a single draw call; this is not the number of WebGL API calls, pixels shaded or GPU operations completed.
• Median and p95 API submission time: the browser's CPU-side time spent issuing render commands within a callback. Because GPU drawing can continue asynchronously, these values cannot be read as GPU draw times.
• 95% CI and variation: a rough interval around mean trial FPS and the coefficient of variation across trials. Small or unstable differences should not be overinterpreted; a result near a refresh cap often says little about maximum rendering capacity.

Browser Limitations

WebGL or OffscreenCanvas worker support may be disabled by browser settings, GPU driver restrictions, site security policy or a restrictive Content Security Policy. OffscreenCanvas workers require both worker support and compatible offscreen drawing and animation features. Worker preview frames are displayed only occasionally and do not represent a separately measured display FPS. Browser power management, software rendering, reduced timer resolution, compositor scheduling, background-tab suspension and open applications all affect observed numbers. A slow or blocked mode gives a clear error or an inconclusive result rather than a fake score.

Common Mistakes to Avoid

• Comparing Canvas 2D to WebGL as if they performed identical operations: the object count is aligned, but GPU point-sprite drawing and 2D rectangle drawing use different APIs and overheads.
• Changing settings between trials: keep the mode, workload, window size and browser comparable when investigating relative performance.
• Assuming 60 FPS means the device cannot be faster: animation callbacks are commonly synchronized to the screen refresh rate, so extra processing capacity may be hidden.
• Running in a hidden or resized tab: the benchmark will cancel because those changes make timing comparisons unreliable.

Frequently Asked Questions

Conclusion

Canvas Performance Test provides repeatable browser-local 2D, WebGL and optional OffscreenCanvas rendering workloads with transparent measurement limits. It helps compare how a browser handles graphic workloads without claiming a universal GPU score. For animation smoothness under a different workload, also use the Animation FPS Test.