What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use Playwright’s locator screenshot method: await page.locator('canvas').screenshot({ path: 'canvas.png' });. It captures the rendered page region at the canvas element’s bounds. Wait for your app to finish drawing first, and use a more specific locator if the page contains multiple canvases.
Capture and save the canvas element
In a Playwright test, navigate to the page, locate the canvas, and call screenshot() with a file path:
As an Amazon Associate I earn from qualifying purchases.
import { test } from '@playwright/test';
test('capture canvas', async ({ page }) => {
await page.goto('https://example.com/app');
const canvas = page.locator('canvas');
await canvas.screenshot({ path: 'artifacts/canvas.png' });
});Replace the example URL with your application. If there is more than one canvas, select the intended one by an application-specific locator rather than relying on the first generic canvas match. Playwright’s locator screenshot method is available since v1.14; check the API documentation for details and the version installed in your project: Playwright Locator API.
Capture into memory
Omit path when you want the image bytes for a visual-diff or image-processing step instead of writing a file:
#1 Best Overall
const imageBuffer = await page.locator('canvas').screenshot();
// Pass imageBuffer to an image-processing or visual-diff step.In Node.js, the returned value is a Buffer. The official guide also demonstrates locator-based element screenshots: Playwright screenshots guide.
Python
Playwright’s Python API supports the equivalent locator screenshot:
canvas = page.locator("canvas")
canvas_bytes = canvas.screenshot(path="artifacts/canvas.png")See the Playwright Python screenshots guide for the documented element screenshot pattern.
Recommended Free Tools
Make sure the canvas has finished drawing
Locator screenshots perform actionability checks and scroll the element into view before capture. That does not tell Playwright when your application’s canvas rendering is complete. Use an app-specific readiness signal—such as a state or event your app exposes—and wait for it before calling screenshot(). There is no universal readiness condition for arbitrary canvas applications.
For example, if your app sets a reliable readiness attribute when its render completes, wait for that attribute before capturing:
await page.waitForFunction(() => {
const canvas = document.querySelector('canvas');
return canvas?.getAttribute('data-render-state') === 'ready';
});
await page.locator('canvas').screenshot({ path: 'artifacts/canvas.png' });The attribute in this example is illustrative: your application must implement the signal and set it only when the canvas is ready.
Choose the output format and scale
Playwright documents PNG as the default screenshot format and also supports JPEG and WebP. JPEG quality can be configured. Choose the format based on what will consume the artifact: PNG is the default, while JPEG quality is relevant when you explicitly request JPEG.
The scale option controls output pixel dimensions:
csscreates one image pixel per CSS pixel.devicefollows the device pixel ratio and can produce larger images on high-density displays.
Use CSS scale for layout-sized artifacts; choose device scale when the device-resolution detail is needed. Other documented screenshot options include animation controls, masks, background handling, screenshot styles, and timeouts. These can help make captures repeatable, but they do not determine whether your application has finished drawing.
Consult the Locator screenshot API for current option names and defaults for your installed Playwright version.
What the screenshot contains
locator.screenshot() captures the rendered page region corresponding to the matched element’s bounds. It is a screenshot of what the page presents, not necessarily an isolated copy of the canvas bitmap. If another element covers part of the canvas, that covering content can appear in the capture. For a scrollable element, the screenshot reflects its currently scrolled content.
This differs from using browser-side canvas APIs such as toDataURL(), which exports the canvas bitmap rather than taking a screenshot of the page region. Choose locator capture when you need the rendered page presentation; choose bitmap export only when your task specifically calls for exporting the canvas itself.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesTroubleshooting
- The screenshot is blank or incomplete: the app may not have finished rendering. Wait for an application-specific completion signal before capture.
- The wrong canvas is captured: narrow the locator to identify the intended canvas rather than using a generic selector on a page with several canvases.
- An overlay appears in the image: locator screenshots show the rendered region at the element’s bounds, so page content covering the canvas may be included. Handle or dismiss the overlay in your test if appropriate.
- The image dimensions are larger than expected: check whether
scaleis set todevice; usecsswhen you want one output pixel per CSS pixel. - The captured scrollable content differs from the expected view: the capture reflects the element’s current scroll position. Set up the intended scroll state before taking the screenshot.
Or skip the browser setup
ScreenshotNeo can return a website screenshot with one GET request. Its clean-shot steps accept cookie or consent banners and remove 60+ known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. It also has an MCP server with screenshot tools for AI agents.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/app -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo captures web pages, not a selector-specific canvas element; use Playwright when you need to target a particular canvas within a page.
The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for the free plan.
Frequently Asked Questions
Can Playwright return a canvas screenshot without saving a file?
Yes. Omit the path option; in Node.js the screenshot method returns a Buffer.
Free tools Windows power users keep installed
One-click scans. No signup required.
Does Playwright wait until a canvas has finished drawing?
No universal canvas-ready signal is defined. Wait for a completion condition specific to your application before taking the screenshot.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
