HTML5 Canvas 2D Game Loop Architecture: Delta Time, Fixed Timesteps & Interpolation

The Fatal Flaws of Variable Delta Time

Most introductory HTML5 Canvas tutorials introduce a naive game loop that captures elapsed time between successive requestAnimationFrame callbacks and multiplies velocities directly:

function loop(timestamp) {
  const dt = (timestamp - lastTime) / 1000; // Variable seconds
  lastTime = timestamp;

  player.x += player.vx * dt; // Vulnerable to tunneling!
  player.vy += GRAVITY * dt;

  ctx.clearRect(0, 0, width, height);
  render();
  requestAnimationFrame(loop);
}

While this appears functional under clean lab conditions, it fails catastrophically in production. The root cause lies in the numerical instability of variable-step numerical integration. In games featuring physics simulations, collision detection, or platforming jumps, physical equations assume that time proceeds in infinitesimal, uniform increments.

When a browser tab experiences an intermittent 100ms garbage collection pause, dt suddenly surges from 0.016s to 0.1s. A bullet travelling at 1,000 pixels per second advances 100 pixels in a single frame, completely bypassing a 10-pixel-thick wall collision boundary—a phenomenon known as collision tunneling. Furthermore, jumps calculated with variable steps result in non-deterministic trajectories, making speedruns impossible and introducing irreproducible physics anomalies.

Glenn Fiedler's Canonical Fixed Timestep Accumulator Pattern

The gold standard solution for deterministic game physics is the Fixed Timestep with Accumulator pattern, famously popularized by Glenn Fiedler ("Fix Your Timestep!"). The core architectural insight is that physics simulation must never run at the whim of the monitor refresh rate.

The architecture maintains an internal "time bank" (the accumulator). On every frame render, the elapsed real-world time is credited to the accumulator. The engine then consumes this accumulated time in discrete, immutable chunks (such as exactly 20 milliseconds, representing a deterministic 50Hz physics rate).

If a frame is displayed on a 120Hz display (8.33ms between renders), the accumulator will only trigger a physics update every other frame. If a frame drops to 30 FPS, the loop simply executes two or three fixed physics updates in rapid succession to catch up:

class CanonicalGameLoop {
  private lastTime: number = 0;
  private accumulator: number = 0;
  private readonly fixedStep: number = 1000 / 60; // 16.666ms (60Hz fixed simulation)
  private readonly maxFrameTime: number = 250; // Prevent spiral of death

  public start(): void {
    this.lastTime = performance.now();
    requestAnimationFrame(this.step.bind(this));
  }

  private step(currentTime: number): void {
    let frameTime = currentTime - this.lastTime;
    this.lastTime = currentTime;

    // Spiral-of-Death Guard: clamp massive frame times
    if (frameTime > this.maxFrameTime) {
      frameTime = this.maxFrameTime;
    }

    this.accumulator += frameTime;

    // Consume time in exact deterministic chunks
    while (this.accumulator >= this.fixedStep) {
      this.savePreviousStates(); // For interpolation
      this.updatePhysics(this.fixedStep);
      this.accumulator -= this.fixedStep;
    }

    // Calculate alpha for butter-smooth visual interpolation
    const alpha = this.accumulator / this.fixedStep;
    this.render(alpha);

    requestAnimationFrame(this.step.bind(this));
  }

  private savePreviousStates(): void { /* Archive entity positions */ }
  private updatePhysics(dt: number): void { /* Deterministic physics tick */ }
  private render(alpha: number): void { /* Interpolate and draw */ }
}

Eliminating Micro-Stutter: State Interpolation (Alpha Blending)

Separating simulation from rendering introduces a subtle visual defect: temporal aliasing or micro-stutter. Because display refresh rates (e.g. 60Hz or 144Hz) rarely divide evenly into fixed physics rates, the simulation state at the moment of rendering is slightly behind real time by the remaining fraction left in the accumulator.

Without correction, an object moving at high speed will appear to jitter slightly across frames. The solution is state interpolation. The engine archives the entity position from the previous physics tick (prevX, prevY). During the render pass, the rendering position is computed as a linear interpolation (lerp) between the previous state and the newly computed state using the remaining accumulator fraction as the blending alpha:

renderPosition = prevPosition + (currentPosition - prevPosition) * alpha

This mathematical guarantee produces silky, cinema-grade visual smoothness across all monitor hardware while keeping the underlying physics calculations 100% deterministic and reproducible.

Mitigating Background Tab Throttling & Hibernation

Modern browser engines aggressively throttle inactive tabs to prolong battery life. When a user switches tabs, requestAnimationFrame is clamped to 1 FPS or halted entirely.

If a player returns to the game tab after 30 seconds, currentTime - lastTime will register 30,000 milliseconds! Without protective clamping, the while (accumulator >= fixedStep) loop will attempt to execute 1,800 consecutive physics ticks on a single frame, completely freezing the browser tab in a catastrophic spiral of death.

Two defense layers must be implemented:

1. Maximum Frame Time Clamping: Clamp frameTime to an upper boundary (e.g. 250ms), discarding unrecoverable time lapses.
2. Page Visibility API Integration: Listen for document.addEventListener('visibilitychange'). When document.hidden === true, automatically transition the game state to an internal pause state. Upon reactivation, reset lastTime = performance.now() and clear the accumulator before resuming ticks.

Comparative Architectural Matrix: Game Loop Timing Strategies

Analyzing timing strategies across browser game implementations:

Conclusion

Building production-grade HTML5 Canvas and WebGL games requires abandoning variable delta time shortcuts. Implementing a fixed-timestep loop with accumulator management, delta time clamping, and alpha state interpolation guarantees mathematical determinism, prevents game-breaking collision tunneling, and delivers flawless visual fidelity across every gaming display.