How to Capture a Screenshot of a Drawn Panel

To capture a visible rectangular panel, select only that region with your operating system’s screenshot tool. On Windows, press Windows + Shift + S, choose rectangular snip, and drag around the panel. On Mac, open Screenshot controls with Shift + Command + 5, choose area capture, and drag around it.

The right method depends on where the panel exists:

• Desktop or native app: use Windows Snipping Tool or macOS Screenshot.
• HTML canvas you control: export the canvas with toDataURL().
• Web page captured repeatedly: use Playwright and target the panel’s locator.

1. Choose the capture method

Where the panel exists	Best method	What you get
Any visible desktop or app region	OS region capture	Pixels currently rendered on screen
A window that contains the panel	Window capture	The selected application window
A canvas on a page you control	canvas.toDataURL()	The canvas bitmap without surrounding browser chrome
A panel on a web page that must be captured repeatedly	Playwright locator screenshot	A repeatable image of the selected element

Screen capture and canvas export are different. Screen capture records rendered pixels, while canvas export serializes the bitmap produced by a page. A canvas containing cross-origin content may not be exportable.

2. Capture a panel on Windows

1. Display the panel at the size and state you want to save.
2. Press Windows + Shift + S. Microsoft documents this shortcut for opening the Snipping Tool overlay.
3. Choose Rectangular snip.
4. Drag from one corner of the panel to the opposite corner. Include a small border if the panel’s edge is hard to see.
5. Select the capture notification to edit or save the image, or open Snipping Tool from the Start menu.

Snipping Tool also provides window, full-screen, and freeform modes. Use window mode when the panel boundary is exactly the application window; use rectangular mode when the panel is only part of that window. See Microsoft’s Snipping Tool instructions.

3. Capture a panel on Mac

1. Arrange the panel and close temporary menus or notifications.
2. Press Shift + Command + 5 to open Screenshot controls.
3. Choose the area-capture option, then drag the crosshair around the panel.
4. Release the pointer and choose where to save the image.

For a complete application window, choose the window capture option and click the target window. Apple notes that some apps may refuse window screenshots. If that happens, the restriction belongs to the app; use an authorized export or the app’s own capture feature. Read Apple’s Mac screenshot guide.

4. Export a drawn HTML canvas

If “drawn panel” means a panel rendered inside an HTML <canvas> element, export the canvas directly:

const canvas = document.querySelector('#panel-canvas');
if (!canvas) throw new Error('Canvas not found');

const pngDataUrl = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = pngDataUrl;
link.download = 'panel.png';
link.click();

image/png is the default format. You can request JPEG or WebP where supported:

const jpegDataUrl = canvas.toDataURL('image/jpeg', 0.9);
const webpDataUrl = canvas.toDataURL('image/webp', 0.9);

The canvas must be origin-clean. If an image, video, or other resource from another origin is drawn without the required cross-origin permission, the browser can throw a security error when you call toDataURL(). Configure the resource and server correctly, or capture the rendered region with an authorized screen or browser tool. Do not attempt to bypass browser origin protections. See MDN’s toDataURL reference.

Save a canvas as a file with a Blob

const canvas = document.querySelector('#panel-canvas');
canvas.toBlob((blob) => {
  if (!blob) throw new Error('Canvas could not be encoded');
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'panel.png';
  link.click();
  URL.revokeObjectURL(url);
}, 'image/png');

5. Automate a panel screenshot with Playwright

For repeatable captures, use a locator that identifies the panel instead of manually dragging a selection. Playwright supports both page screenshots and element screenshots.

Install and run

npm install -D playwright
npx playwright install chromium

// capture-panel.mjs
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
await page.goto('https://example.com/dashboard', { waitUntil: 'networkidle' });

const panel = page.locator('.drawn-panel');
await panel.waitFor({ state: 'visible' });
await panel.screenshot({ path: 'panel.png', type: 'png' });

await browser.close();

Replace .drawn-panel with a selector that uniquely identifies the intended region. If you need the whole viewport instead, use:

await page.screenshot({ path: 'viewport.png' });

For a page taller than the viewport:

await page.screenshot({ path: 'full-page.png', fullPage: true });

Element screenshots include the element’s bounding box. Make the panel visible first, wait for fonts and data, and ensure animations have settled. Playwright’s screenshot documentation covers page, full-page, buffer, and locator captures.

Useful Playwright options

Option	Use
path	Writes the image to a file.
type: 'png' | 'jpeg'	Chooses the output format.
quality	Controls JPEG quality; it does not apply to PNG.
fullPage: true	Captures the complete scrollable page; it is generally unnecessary for a single panel.
omitBackground: true	Produces transparency where supported.

6. Or skip the browser setup

ScreenshotNeo captures a URL with one request and returns PNG, JPEG, WebP, or PDF. Its element capture can target a CSS selector, and it supports custom CSS, JavaScript, viewport and device settings, waits, cookies, headers, geolocation, dark mode, full-page capture, caching, asynchronous jobs, bulk capture, and signed links. The ScreenshotNeo API documentation lists the parameters.

For a page containing your panel, request the URL directly:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/dashboard -o panel.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/dashboard"},
    timeout=90,
)
r.raise_for_status()
open("panel.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/dashboard' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('panel.webp', data));

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; inspect the X-Page-Verdict and X-Billed response headers to see the result. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents.

The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

7. Troubleshooting

Problem	Cause	Fix
The capture includes browser chrome or another window	The selected rectangle was too large or the wrong capture mode was used.	Use rectangular area capture and drag tightly around the panel.
The Mac app window cannot be captured	The app restricts screenshots.	Use the app’s export function or an authorized capture path.
toDataURL() throws a security error	The canvas is not origin-clean because of cross-origin content.	Serve resources with appropriate CORS permissions or use an authorized rendered capture.
The canvas export is blank	Drawing finished after the export ran, or the wrong canvas was selected.	Export after rendering completes and verify the selector.
Playwright says the locator resolved to multiple elements	The selector is not unique.	Use a stable id, data attribute, role, or a more specific locator.
Playwright captures a loading skeleton	The screenshot ran before data, fonts, or images finished loading.	Wait for a visible panel state, a specific selector, or the relevant network activity.
The panel is clipped	Overflow, transforms, or a panel smaller than its content changed the bounding box.	Inspect computed dimensions, remove unintended clipping, and capture the correct ancestor element.
The automated image changes between runs	Animations, timestamps, ads, responsive layout, or device scale differ.	Freeze animations, block variable content, set a fixed viewport and device scale, and wait for a stable state.

8. Performance, reliability, and cost

• Fastest one-off capture: OS region selection; there is no setup.
• Best fidelity for a canvas: direct canvas export, because it saves the bitmap rather than a screen crop.
• Best repeatability: Playwright or a screenshot API with a stable selector and fixed viewport.
• Reduce capture time: capture the element instead of the full page, avoid unnecessary full-page scrolling, and wait for the exact state you need.
• Improve reliability: use deterministic data, disable animations, set a consistent timezone and viewport, and record failures with the URL and selector.
• Control file size: use PNG for sharp diagrams and transparency; use JPEG or WebP for photographic content when supported.
• API cost: ScreenshotNeo bills only clean shots. Failed loads, bot checks, blank pages, timeouts, and cache hits are not billed, and the response headers identify the verdict.

9. FAQ

Can I capture only part of a native application?

Yes. Use rectangular selection and drag around the panel. Window capture is better when the entire application window is the desired boundary.

Is a canvas screenshot the same as a screen screenshot?

No. Canvas export saves the canvas bitmap and excludes surrounding pixels. Screen capture records whatever is visibly rendered, including browser scaling and overlays.

Should I use full-page capture for a panel?

Usually no. Element capture is smaller and more stable. Use full-page mode only when the panel itself extends beyond the viewport and the complete scrollable content is required.

What if I do not know the panel’s CSS selector?

Inspect the element in browser developer tools and choose a stable id, class, role, or data attribute. Avoid selectors based on generated class names that change between builds.