ChromeDevTools / ChromeDevTools/chrome-devtools-mcp

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

Open
#806 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

collecting-feedback feature
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.