Function renderFrame

scripts/tmux/tmux-viewer/gif-exporter.ts:91–161

* Render a single capture frame to the canvas

(
  ctx: CanvasRenderingContext2D,
  capture: Capture,
  canvasWidth: number,
  canvasHeight: number,
  renderCtx: RenderContext
)

 * Render a single capture frame to the canvas
 */
function renderFrame(
  ctx: CanvasRenderingContext2D,
  capture: Capture,
  canvasWidth: number,
  canvasHeight: number,
  renderCtx: RenderContext
): void {
  const { fontSize, lineHeight, bgColor, fgColor, labelColor, showLabel } = renderCtx

  // Clear and fill background
  ctx.fillStyle = bgColor
  ctx.fillRect(0, 0, canvasWidth, canvasHeight)

  // Set up text rendering
  ctx.font = `${fontSize}px monospace`
  ctx.textBaseline = 'top'
  ctx.fillStyle = fgColor

  // Calculate content area
  const padding = 10
  const labelHeight = showLabel ? 30 : 0
  const contentStartY = padding + labelHeight

  // Render label if enabled
  if (showLabel) {
    const label = capture.frontMatter.label || `Capture ${capture.frontMatter.sequence}`
    const time = formatTimestamp(capture.frontMatter.timestamp)

    ctx.fillStyle = labelColor
    ctx.font = `bold ${fontSize - 2}px sans-serif`
    ctx.fillText(`[${capture.frontMatter.sequence}] ${label}`, padding, padding)

    // Time on the right
    const timeText = time
    const timeWidth = ctx.measureText(timeText).width
    ctx.fillText(timeText, canvasWidth - padding - timeWidth, padding)

    // Draw separator line
    ctx.strokeStyle = labelColor
    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.moveTo(padding, padding + fontSize + 5)
    ctx.lineTo(canvasWidth - padding, padding + fontSize + 5)
    ctx.stroke()
  }

  // Render terminal content
  ctx.font = `${fontSize}px monospace`
  ctx.fillStyle = fgColor

  const lines = capture.content.split('\n')
  const maxLines = Math.floor((canvasHeight - contentStartY - padding) / lineHeight)

  for (let i = 0; i < Math.min(lines.length, maxLines); i++) {
    const line = lines[i]
    // Strip ANSI codes for now (basic support)
    const cleanLine = stripAnsiCodes(line)
    ctx.fillText(cleanLine, padding, contentStartY + i * lineHeight)