The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use JsPlumb’s patched @jsplumb/html2canvas package, not the stock html2canvas package. Pass your JsPlumb surface container to html2canvas, save the current pan and zoom, optionally call zoomToFit(), and restore the view after the returned promise resolves. The result is an HTMLCanvasElement that you can download as a PNG.
Why jsPlumb connectors disappear from ordinary html2canvas captures
JsPlumb diagrams commonly combine ordinary DOM nodes with connector layers managed by JsPlumb. A normal html2canvas integration may reproduce the visible HTML while missing or incorrectly rendering those connector layers. JsPlumb’s core team documents a patched integration package, @jsplumb/html2canvas, because the stock library did not handle its rendering correctly for the demonstrated workflow.
The package still behaves like html2canvas: it reads DOM elements and applied CSS in the browser and reconstructs them on a canvas. It is not an operating-system screenshot and does not guarantee pixel-identical output for every CSS feature, cross-origin image, SVG, or canvas combination.
Install the JsPlumb-supported package
Install the package in the application that owns your JsPlumb surface:
Recommended Free Tools
#1 Best Overall
npm install --save @jsplumb/html2canvasImport the patched renderer rather than importing a separately installed upstream html2canvas build:
import html2canvas from "@jsplumb/html2canvas";Your export code needs access to the JsPlumb surface instance. In the current JsPlumb APIs, the surface exposes container, getPan(), getZoom(), zoomToFit(), and setPanAndZoom().
Minimal PNG export that preserves the editor view
This implementation saves the current viewport, fits the complete diagram, renders the surface container, restores the original view, and starts a browser download:
import html2canvas from "@jsplumb/html2canvas";
function doExport(surface) {
const p = surface.getPan();
const z = surface.getZoom();
surface.zoomToFit();
html2canvas(surface.container).then((canvas) => {
surface.setPanAndZoom(p.x, p.y, z, false);
const link = document.createElement("a");
link.download = "jsplumb.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
}The promise callback is the important boundary: do not restore the pan and zoom before rendering completes, or the capture can contain the wrong viewport. The final false argument in setPanAndZoom follows JsPlumb’s documented pattern to restore the saved state without triggering an additional animated change.
Export without fitting the graph
If the user wants exactly the currently visible region, omit zoomToFit() but keep the save-and-restore pattern. This avoids changing the editor at all:
function exportCurrentView(surface) {
const p = surface.getPan();
const z = surface.getZoom();
html2canvas(surface.container).then((canvas) => {
surface.setPanAndZoom(p.x, p.y, z, false);
const link = document.createElement("a");
link.download = "jsplumb-current-view.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
}Handle failures and always restore the view
For production UI, restore pan and zoom in both success and failure paths. A finally block also protects the editor if rendering throws:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
async function exportSafely(surface) {
const p = surface.getPan();
const z = surface.getZoom();
try {
surface.zoomToFit();
const canvas = await html2canvas(surface.container);
const link = document.createElement("a");
link.download = "jsplumb.png";
link.href = canvas.toDataURL("image/png");
link.click();
} catch (error) {
console.error("jsPlumb export failed", error);
throw error;
} finally {
surface.setPanAndZoom(p.x, p.y, z, false);
}
}Prevent the visible zoom jump
zoomToFit() changes the live editor before html2canvas begins. Users may briefly see the diagram jump to a different scale. JsPlumb core team member Simon Porritt describes the underlying behavior this way: “html2canvas faithfully reproduces the input it is given; perhaps a decent approach in production might be to arrange to mask the JsPlumb canvas while you’re running the export.”
You can place an export overlay over the editor, disable pointer interaction, and show a short “Preparing image…” status while the fit and render run. The overlay does not change what is captured if it sits outside surface.container. If the overlay is inside the container, hide it before calling html2canvas or exclude it from the capture.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsChoose the right capture boundary and size
Capture the complete surface
Pass surface.container, not an individual node, when connectors and the diagram’s coordinate system are part of the export:
const canvas = await html2canvas(surface.container);Call zoomToFit() first when every node must be visible. Fit behavior depends on the surface’s current dimensions, so give the container a stable width and height before starting the export.
Capture one region
If your application has a wrapper around the surface, capture that wrapper only when it contains the connector layer and all nodes you need. Capturing a child node by itself cannot include connectors rendered outside that child.
Use a helper package when appropriate
JsPlumb’s official article also mentions a canvasToImage helper in @jsplumb/canvas-image-processing. It is optional; a normal anchor download from canvas.toDataURL() is enough for a PNG.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
Why output can differ from the screen
Because the renderer reconstructs the DOM and CSS, the result can differ from a browser’s pixel screenshot in several cases:
- CSS properties that html2canvas does not implement are omitted or approximated.
- Images loaded from another origin can be unavailable to the canvas unless the server and application are configured for cross-origin use.
- Unusual SVG and canvas layering can change connector or node appearance.
- Fonts, animations, transitions, and late-loading assets can produce inconsistent output.
Freeze animations, wait until nodes and images have loaded, and capture only after the diagram has reached its final layout. If a connector is still missing, inspect the connector layer in the DOM and confirm that you are passing the surface container used by JsPlumb.
When a native JsPlumb exporter is a better choice
For Toolkit surfaces whose nodes are rendered through JsPlumb’s shape library and SVG, compare the native exporters before choosing DOM reconstruction. JsPlumb provides SVGExporter and ImageExporter for SVG, PNG, or JPG output. Their options include width, height, output MIME type, grid visibility, labels, stroke width, margins, selections, and paths.
The SVG exporter can export an entire Surface, a selection, or a path. If both width and height are supplied, width takes precedence and the aspect ratio is preserved. Shape-library export expects node data containing left, top, w, and h; without a shape library, a default SVG rectangle represents nodes. The SvgExporter was first released in version 6.6.0.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use html2canvas when
- Your diagram is primarily HTML and CSS.
- You need the patched integration documented by JsPlumb.
- A quick browser-side PNG is more important than vector output.
- You want to preserve the exact DOM-driven appearance of a surface.
Use a native exporter when
- The Toolkit surface is SVG-native.
- You need diagram-aware selection, path, label, grid, margin, or stroke controls.
- You need scalable SVG output rather than a reconstructed bitmap.
Or skip the browser setup
If your goal is a URL screenshot rather than an in-app JsPlumb export, ScreenshotNeo provides a website screenshot API and MCP server. It is not a replacement for the in-browser surface export above, but it can remove the browser automation and rendering setup around a published diagram page.
One GET request returns a PNG, JPEG, WebP, or PDF. The API accepts cleanup and capture options such as full-page capture, CSS selectors, custom JavaScript, waits, device presets, viewport and retina settings, headers, cookies, user agent, timezone, geolocation, blocked resources, caching, signed links, asynchronous jobs, webhooks, and bulk capture.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for the complete option list and response headers.
- Cookie banners, newsletter popups, and chat widgets are removed before the shot.
- Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing result.
- An MCP server lets Claude, Cursor, and other MCP clients call
take_screenshot,get_page_info, andcapture_pdf. - The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots.
Create a free ScreenshotNeo account to start with 1,000 screenshots a month and no card.
Equivalent API calls in Python and Node.js
For a published page, these examples request the same screenshot endpoint:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());Troubleshooting checklist
Connectors are missing
Confirm that you installed and imported @jsplumb/html2canvas, then pass surface.container. Do not assume an upstream html2canvas build will render JsPlumb’s connector layer correctly.
The editor remains zoomed out
Restore state inside the promise callback or a finally block. Save both values before calling zoomToFit(); restore with setPanAndZoom(p.x, p.y, z, false).
The download is blank
Check that the container has dimensions, that the diagram has finished laying out, and that required images and fonts have loaded. A zero-sized or hidden container gives the renderer nothing useful to reproduce.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Cross-origin images fail
Serve images with compatible cross-origin headers or remove them from the export. The browser’s canvas security rules can prevent pixel reads when assets come from an incompatible origin.
The capture looks different from the screen
Inspect unsupported CSS, SVG/canvas stacking, transitions, and late content. html2canvas reconstructs the DOM; it does not capture the compositor’s final pixels.
The page visibly flashes during export
Mask the export area, disable transitions, and restore the saved pan and zoom after rendering. Keep any status UI outside the container being captured.
Operational and cost considerations
Client-side export consumes the user’s browser memory and CPU, especially for a large, full-page surface or a high-resolution canvas. Keep the captured region no larger than necessary, avoid repeated exports while one is running, and release references to canvases after use if your application retains them.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchNative SVG export can be more efficient for vector-heavy Toolkit diagrams and remains editable or scalable. html2canvas is convenient for a browser download but should be treated as a rendering approximation rather than a guaranteed pixel-perfect screenshot.
Frequently Asked Questions
Can I use the regular html2canvas package instead?
JsPlumb’s documented connector workflow uses the patched @jsplumb/html2canvas package because the stock library did not handle its rendering correctly.
How do I export only the current viewport?
Save pan and zoom, omit zoomToFit(), render surface.container, and restore the saved values after the promise resolves.
Can the result be JPEG instead of PNG?
Yes. Pass a JPEG MIME type to canvas.toDataURL(), for example canvas.toDataURL('image/jpeg', 0.9), while remembering that JPEG has no transparency.
Does ScreenshotNeo capture an unsaved, client-side JsPlumb editor?
Not directly. ScreenshotNeo captures a URL; the diagram must be published or otherwise reachable at that URL. Use the in-browser method for an unsaved editor surface.
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.
