What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
First identify what you want to save. If JavaScript has drawn the image into a browser <canvas>, export the canvas with toBlob() and download the resulting file. If you want a screenshot of a rendered webpage from Node.js, use Playwright’s page.screenshot(). These are different jobs: one saves canvas pixels; the other captures how a page or element looks.
Choose the right way to save it
| What you need | Use | Result | Key limitation |
|---|---|---|---|
| An image already drawn in a browser canvas | canvas.toBlob() and an object URL |
A named image downloaded by the browser | The canvas must be origin-clean; cross-origin images require CORS permission. |
| A webpage, element, or complete rendered page from Node.js | Playwright page.screenshot() |
A file at the chosen path, or a buffer if no path is given | You need a Playwright browser automation setup; format and scale depend on options. |
Use the canvas route for a specific generated graphic. Use Playwright when the desired image is the page’s appearance, when you need a repeatable automated capture, or when you need a full-page or element screenshot.
Download an image from a browser canvas
Call toBlob() on the canvas, create a temporary object URL for the returned Blob, then activate an anchor whose download attribute supplies the filename. This example requests PNG, the required canvas export format:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →const canvas = document.querySelector("canvas");
if (!canvas) {
throw new Error("No canvas element found");
}
canvas.toBlob((blob) => {
if (!blob) {
throw new Error("Canvas export did not produce a Blob");
}
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "screenshot.png";
link.click();
// Release the URL after it has served the download.
URL.revokeObjectURL(url);
}, "image/png");Wait until the canvas is ready
Run the export only after your drawing code has completed. If you call it before the image has been drawn, the file can be valid but contain an empty or incomplete canvas. The selector in the example targets the first canvas in the document; if a page contains several, select the one that contains the graphic you want.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Choose an image format
PNG is the safe default and is required by the canvas export API. JPEG and WebP can be available, but support depends on the browser. If the requested type is omitted or unsupported, canvas export falls back to PNG. When a particular format matters to your workflow, verify the result rather than relying only on the requested MIME type.
Manage the object URL lifetime
An object URL points to the Blob without converting the entire image into a large text string. Release it with URL.revokeObjectURL() when it is no longer needed. If you also use that URL for a preview, keep it alive until the preview or other user interaction is finished; revoking it immediately can make the image inaccessible.
Why not use toDataURL()?
toDataURL() encodes the entire image into an in-memory string. For typical downloads, MDN recommends toBlob() with URL.createObjectURL(), which avoids creating that potentially unwieldy string. A data URL remains useful when you specifically need image data embedded or transmitted as a URL.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Save a webpage screenshot with Playwright in Node.js
When you need the browser-rendered page rather than just canvas pixels, Playwright can write a screenshot directly to a file:
await page.screenshot({ path: "screenshot.png" });This call assumes you already have a Playwright page object open at the page you want to capture. A file extension determines the image format when a path is provided. If you omit path, the screenshot method returns a buffer that your code can process or send elsewhere.
Capture a full page or one element
Playwright’s screenshot API also supports full-page capture and screenshots of individual elements. Use a full-page capture when the output should include content beyond the currently visible viewport; use an element screenshot when only one component is needed. This is still a screenshot of the rendered webpage, not an export of a canvas’s internal pixel data.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Set format and scale intentionally
With a path, Playwright infers the image format from its extension. Screenshot options also include quality for JPEG or WebP and control over CSS-pixel versus device-pixel scaling. Choose options to match the destination: a format suitable for a compact image may not be appropriate when you need lossless detail. The result’s dimensions can differ depending on the scale setting and page capture mode.
Save a file downloaded by the website
A page-triggered download is a third case. If clicking something on the site starts a download, wait for Playwright’s download event and explicitly save the temporary download to a durable location. The browser stores the download in a temporary folder, and it is deleted when its browser context closes.
const downloadPromise = page.waitForEvent("download");
await page.getByRole("button", { name: "Download" }).click();
const download = await downloadPromise;
await download.saveAs("./downloaded-file.png");Replace the button locator with the control used by your page, and choose an output filename appropriate to the downloaded file. Calling saveAs() before closing the context prevents the temporary-file lifecycle from discarding the download.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Fix common export and screenshot failures
toBlob() fails with a security error
A canvas becomes tainted if it draws foreign-origin content that was loaded without the required CORS permission. In that state, attempts to call toBlob(), toDataURL(), or captureStream() throw a SecurityError. Setting an image’s crossorigin mode alone does not grant permission: the remote server must send the appropriate CORS headers. If the remote source does not permit access, changing export methods cannot bypass the browser’s security boundary.
The saved canvas image is blank or incomplete
- Confirm the selected element is the canvas that contains the target graphic.
- Wait for the drawing and any image loading to finish before calling
toBlob(). - Check that your callback receives a non-null Blob before creating a link.
The output is PNG even though another type was requested
Canvas export falls back to PNG when the requested format is unsupported. JPEG and WebP availability can vary, so check support and inspect the actual output if a downstream system requires one format.
The Playwright file is missing after the run
If the site initiated a download, do not rely on its temporary path surviving browser-context closure. Wait for the download event, call download.saveAs(), and only then close the context.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
The Playwright screenshot has the wrong scope or dimensions
Check whether you intended a viewport screenshot, full-page capture, or element screenshot. Then check the configured pixel scaling and, where relevant, file extension and format options. These choices determine what area is included and how the output is encoded.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability, and cost considerations
Browser canvas export
toBlob() is generally preferable to encoding a large canvas as a data URL because the latter creates a complete in-memory string. Keep object URLs only as long as needed and revoke them when the user no longer needs access. CORS is a hard security constraint, not a performance setting; a client-side export cannot recover pixel access that the remote origin has not allowed.
Playwright automation
Playwright is appropriate when capture must reflect a rendered page or run as part of Node.js automation. You must provide the browser automation setup and decide how to handle the page’s state, capture scope, format, and scale. For website-triggered downloads, explicitly persisting the file avoids depending on a temporary browser-context location.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsHosted screenshot API option
If you do not want to operate browser automation, ScreenshotNeo is a screenshot API and MCP server for developers. It takes a URL and returns a screenshot or PDF; it is for capturing webpages, not exporting the private pixel contents of a canvas already in your application. Its clean-capture steps accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets, and each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; responses identify the page verdict and billing status with headers. It also provides MCP tools for AI agents, including Claude, Cursor, and other MCP clients.
For a simple webpage capture, make a GET request with the target URL and your API key. The returned image is written to shot.webp. See the ScreenshotNeo API documentation for request details.
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpThe same endpoint can be called from Python:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)Or from Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo’s free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Every feature is available on every plan. Sign up for ScreenshotNeo and start with 1,000 free screenshots a month, with no card required.
Quick Recap
Which workflow should you use?
- Use
canvas.toBlob()when JavaScript has already drawn the exact image you want into a canvas and the page has permission to read its pixels. - Use Playwright when you need a screenshot of a rendered page, a page element, or the full document from Node.js.
- Use Playwright’s download event and
saveAs()when the website itself generates a file download. - Use a screenshot API when you want to capture a webpage from a URL without setting up browser automation locally.
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.
