Verifying canvas apps when the Claude Code Browser pane does not composite

Verifying canvas apps when the Browser pane does not composite

Observed August 2026 while building a canvas game in Claude Code.

mcp__Claude_Browser__computer with action: "screenshot" can fail with "the Browser pane is not displayed, so the page is not compositing frames". Two consequences follow, each with a workaround.

1. requestAnimationFrame is paused

If the pane never composites, the rAF loop never runs. The canvas stays blank and an "is it rendering?" check reports a black buffer. This is not a bug in the app.

Expose a dev-only handle and step the loop manually:

// main.ts - stripped from production by the bundler
if (import.meta.env.DEV) {
  ;(window as unknown as Record<string, unknown>).__app = { game, renderer, input, audio }
}

// via javascript_tool
window.__run = (n, dt = 1/60) => { for (let i=0;i<n;i++) h.game.update(dt); h.game.draw(); }

2. Getting pixels back out

canvas.toDataURL() output is 100 KB or more, which is too large to return through javascript_tool. Run a throwaway receiver in a scratch directory and POST to it, then read the PNG with the file-read tool, which renders images:

// node shotserver.mjs <outdir>  - listens on 7788, CORS *, writes ?name=foo.png
await fetch('http://localhost:7788/shot?name=' + name, { method:'POST', body: cv.toDataURL('image/png') })

For pixel art, draw the low-resolution back buffer into a larger canvas with imageSmoothingEnabled = false first. A 3x view is much easier to judge than 1x.

Gotchas

• javascript_tool reuses one scope, so a bare const g = ... fails on the second call with "Identifier already declared". Wrap snippets in an IIFE.
• Editing any source file triggers a Vite full reload, silently resetting window.__app and every helper mid-experiment. Interleaving file edits with multi-step browser measurements makes a fresh instance look like a state bug.
• A gate or overlay that dismisses on the first keypress swallows the first synthetic key. Budget one throwaway tap.
• Contact sheets are the highest-value shot: tile every animation frame (explosion stages, sprite variants) into one image and inspect them side by side instead of catching a good moment live.