take_screenshot captures white background instead of CSS background for transparent canvas elements

[drlamer]

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