The Complete Production SOP: How to Deploy and Run HTML5 Canvas 2D Procedural Renderer in Autonomous AI Agents

---
name: "canvas-2d-procedural-renderer"
description: "Develop fast, interactive 2D visualizations and generative art using HTML5 Canvas API."
metadata:
  author: "MDN Web Docs"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup canvas 2d render loop"
  - "scale canvas for retina display"
  - "draw procedural curves canvas"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# HTML5 Canvas 2D Procedural Renderer

Leverages Canvas 2D context: requestAnimationFrame render loops, path drawing, quadratic bezier curves, radial gradients, particle physics, and Retina display pixel-ratio scaling.

export function configureRetinaCanvas(canvas: HTMLCanvasElement, width: number, height: number): CanvasRenderingContext2D {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = Math.floor(width * dpr);
  canvas.height = Math.floor(height * dpr);
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;

  const ctx = canvas.getContext('2d', { alpha: false });
  if (!ctx) throw new Error('Failed to acquire 2D context');
  ctx.scale(dpr, dpr);
  return ctx;
}

export class ProceduralEngine {
  private animFrameId: number | null = null;
  private lastTimestamp = 0;

  constructor(private ctx: CanvasRenderingContext2D, private width: number, private height: number) {}

  public start(): void {
    const loop = (timestamp: number) => {
      const delta = (timestamp - this.lastTimestamp) / 1000;
      this.lastTimestamp = timestamp;

      this.update(delta);
      this.render();

      this.animFrameId = requestAnimationFrame(loop);
    };
    this.animFrameId = requestAnimationFrame(loop);
  }

  public stop(): void {
    if (this.animFrameId !== null) {
      cancelAnimationFrame(this.animFrameId);
      this.animFrameId = null;
    }
  }

  private update(_delta: number): void { /* deterministic state update */ }
  private render(): void {
    this.ctx.clearRect(0, 0, this.width, this.height);
    // Procedural draw commands
  }
}