tent="width=device-width, initial-scale=1" /> 120 FPS Demo

120 FPS Demo

Mode: Target FPS:

Measured FPS: 0

Last Frame Time (ms): 0

Mode: raf

Note: The browser and display refresh rate determine achievable FPS. If your display supports 120Hz and the browser isn't throttling, requestAnimationFrame will run near that rate. The fixed-interval mode attempts to run updates at the target FPS using setInterval.

1d:T12a1,// Animation module // Exports Animator class which supports two modes: // - 'raf': requestAnimationFrame driven loop // - 'interval': setInterval driven loop targeting a specified FPS export class Animator { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.running = false; this.mode = 'raf'; this.targetFps = 120; this._rafId = null; this._intervalId = null; this.state = { x: 50, y: 100, radius: 28, speed: 420 // pixels per second }; this._lastTime = null; this._frameTimes = []; this._measuredFps = 0; this._lastFpsUpdate = 0; this._resize(); window.addEventListener('resize', () => this._resize()); } setMode(mode) { if (mode !== 'raf' && mode !== 'interval') { throw new Error('Unsupported mode'); } this.mode = mode; if (this.running) { this.stop(); this.start(); } } setTargetFps(fps) { this.targetFps = Math.max(1, Math.min(240, Math.round(fps))); if (this.running && this.mode === 'interval') { this.stop(); this.start(); } } start() { if (this.running) return; this.running = true; this._lastTime = performance.now(); this._frameTimes = []; this._measuredFps = 0; if (this.mode === 'raf') { this._rafLoop(this._lastTime); } else { const interval = 1000 / this.targetFps; this._intervalId = setInterval(() => { const now = performance.now(); this._tick(now); }, interval); } } stop() { this.running = false; if (this._rafId != null) { cancelAnimationFrame(this._rafId); this._rafId = null; } if (this._intervalId != null) { clearInterval(this._intervalId); this._intervalId = null; } } _rafLoop(now) { this._rafId = requestAnimationFrame((t) => this._rafLoop(t)); this._tick(now); } _tick(now) { const dt = Math.max(0, (now - this._lastTime) / 1000); // seconds this._lastTime = now; // Update state with time-based movement this.state.x += this.state.speed * dt; if (this.state.x - this.state.radius > this.canvas.width) { this.state.x = -this.state.radiu