Method render

examples/worker-rendering/main.ts:93–138

()

  }

  private render(): void {
    const { ctx, canvas, frameTimes } = this;
    const width = canvas.width;
    const height = canvas.height;

    // Clear canvas
    ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.fillRect(0, 0, width, height);

    if (frameTimes.length === 0) return;

    // Draw 60fps target line
    const targetY = height - (EXPECTED_FRAME_TIME_MS / this.maxFrameTime) * height;
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.lineWidth = 1;
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(0, targetY);
    ctx.lineTo(width, targetY);
    ctx.stroke();
    ctx.setLineDash([]);

    // Draw bars
    const barWidth = width / FRAME_BUFFER_SIZE;
    const startIndex = Math.max(0, frameTimes.length - FRAME_BUFFER_SIZE);

    for (let i = 0; i < frameTimes.length; i++) {
      const frameTime = frameTimes[i];
      const x = i * barWidth;
      const barHeight = Math.min(1, frameTime / this.maxFrameTime) * height;
      const y = height - barHeight;

      // Color based on frame time
      let color: string;
      if (frameTime <= EXPECTED_FRAME_TIME_MS) {
        color = '#10b981'; // Green - good
      } else if (frameTime <= FRAME_TIME_SLOW_THRESHOLD) {
        color = '#f59e0b'; // Orange - slow
      } else {
        color = '#ef4444'; // Red - dropped
      }

      ctx.fillStyle = color;
      ctx.fillRect(x, y, barWidth - 1, barHeight);
    }
  }

  clear(): void {
    this.frameTimes = [];