ChromeDevTools / ChromeDevTools/chrome-devtools-mcp
take_screenshot captures white background instead of CSS background for transparent canvas elements
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 52.3k
- Forks
- 4.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 83
Description
Problem
When using take_screenshot on pages with transparent <canvas> elements (e.g., Cytoscape.js, Chart.js, Three.js), the screenshot shows a white background instead of the actual CSS background color set on the container element.
Root Cause
The Chrome DevTools Protocol Page.captureScreenshot composites transparent layers against a white base layer by default, ignoring CSS backgrounds behind transparent elements.
Evidence
// DOM inspection shows correct setup:
containerBgColor: "rgb(15, 23, 42)" // Dark slate - correct
canvasPixels: { r: 0, g: 0, b: 0, a: 0 } // Transparent - expected
// But screenshot shows WHITE where it should be dark
- User's browser renders correctly (dark background visible)
- MCP screenshot shows white background
- Same page, same DOM, different visual result
Expected Behavior
Screenshots should capture what the user actually sees in the browser, including CSS backgrounds behind transparent canvas elements.
Suggested Fix
Call Emulation.setDefaultBackgroundColorOverride before Page.captureScreenshot:
// Option 1: Add parameter to take_screenshot
take_screenshot({ backgroundColor: { r: 15, g: 23, b: 42, a: 255 } })
// Option 2: Auto-detect from page's computed background
const bgColor = await getComputedBackgroundColor();
await cdp.send('Emulation.setDefaultBackgroundColorOverride', { color: bgColor });
await cdp.send('Page.captureScreenshot', {...});
await cdp.send('Emulation.setDefaultBackgroundColorOverride', {}); // Reset
Affected Use Cases
- Network topology visualizations (Cytoscape.js)
- Data visualization dashboards (Chart.js, D3.js)
- 3D scenes (Three.js, Babylon.js)
- Any app using transparent canvas overlays with CSS backgrounds
- Dark mode applications with canvas elements
Environment
- chrome-devtools-mcp: latest (via npx)
- Chrome: 143.x
- OS: Windows 10
References
- Puppeteer issue #344 - Same root cause, fixed with
setDefaultBackgroundColorOverride - CDP Emulation.setDefaultBackgroundColorOverride
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the take_screenshot entry point and trace the Page.captureScreenshot call. Compare screenshot behavior for a transparent canvas over a CSS-colored container, using Emulation.setDefaultBackgroundColorOverride as the relevant CDP reference. Done means the captured image preserves the intended background and any temporary override is reset afterward.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- devtools, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100