html2canvas approximates the browser's rendering in JavaScript. HTML to Image captures the real thing — actual Chrome paint, identical on every render, hosted on a CDN.
Disclosure: we built HTML to Image. html2canvas is a clever library doing a genuinely hard thing; this page is about the cases where an approximation isn't enough.
| Factor | html2canvas | HTML to Image |
|---|---|---|
| Cost to start | Free (open source) | $0 to start — 25 renders/month free |
| Infrastructure to run | None — runs in the visitor's browser | None — hosted API |
| Ongoing maintenance | CSS workarounds; infrequent releases | None |
| Rendering engine | JavaScript re-implementation of rendering | Headless Chrome — the browser's actual paint |
| Consistent output | Varies by browser and device | Identical output every render |
| Works server-side | No | Yes |
| Named templates | No | 25 |
| CDN-hosted output | No — a data URL in the browser | Yes — every render returns a CDN URL |
| Best for | quick in-app captures where fidelity is negotiable | pixel-accurate captures rendered server-side |
Keep html2canvas when the capture genuinely has to happen in the visitor's browser — a drawing the user just made, a widget's mid-session state — and a close-enough likeness does the job. Feedback and bug-report screenshots are the canonical fit, and no server-side tool can see that state.
Switch to HTML to Image the moment the pixels matter or the capture leaves the app. Share cards, downloadable certificates, invoice snapshots and anything brand-facing will eventually hit html2canvas's gaps: unsupported CSS silently dropped, cross-origin images tainting the canvas, fonts rendering differently per device, and output that varies with whichever browser the user happens to be in. Rendering server-side in real Chrome makes the output dependable enough for email and identical for every user — and if the content lives at a URL, a selector capture replaces the whole client-side dance.
The browser's actual paint. html2canvas re-implements rendering in JavaScript and inevitably trails the real engine — gradients, filters, shadows, exotic layout and new CSS land late or not at all. Headless Chrome has no compatibility matrix to consult: what the browser shows is what you get.
Deterministic and server-side. Every render is the same Chrome, the same fonts, the same output — not whatever browser, zoom level and font stack each visitor brings. It also runs where html2canvas cannot: cron jobs, queues, webhooks and build steps, with no user session required.
No canvas tainting, plus hosting. Cross-origin images and fonts load normally instead of poisoning the export, and the response is a CDN URL ready to share — replacing the toDataURL()-then-upload plumbing. Twenty-five named templates cover the share-card shapes without any markup.
Capturing client-only state. What the user drew, typed or toggled this session exists only in their DOM. html2canvas is there; no server-side renderer is.
Zero cost and zero network. For rough internal captures at any volume, a bundled library with no API calls is hard to beat on price — you pay in fidelity rather than money.
// html2canvas — re-draws the DOM in JS, in the visitor's browser
html2canvas(document.querySelector('#card')).then((canvas) => {
const dataUrl = canvas.toDataURL('image/png');
// fidelity depends on what the library re-implements,
// output varies by browser, and uploading is on you
});# HTML to Image — real Chrome paint, server-side
curl -X POST https://app.html2img.com/api/html \
-H 'X-API-Key: your-key-here' \
-H 'Content-Type: application/json' \
-d '{"html":"<div class=\"card\">...</div>",
"css":".card{...}","width":800,"height":420}'
# Response includes a CDN-hosted URLMost apps can produce the shareable version of a component as an HTML string server-side — that string goes to the HTML endpoint with your CSS. Content already live at a URL goes to the Screenshot endpoint, where the selector parameter captures a single element. Either way you get a stable CDN URL instead of a base64 blob to shuttle around.
html2canvas is free until the first "why does the download look broken?" ticket. The costs are workarounds — proxying assets to dodge canvas tainting, swapping in supported CSS, testing exports across browsers — and releases have been infrequent, so waiting for fixes is not a strategy. If your captures are internal-only and roughly right is fine, free wins. When output represents your brand, $9 a month for renders that are simply correct is the cheaper path.
Because html2canvas does not screenshot anything. It reads the DOM and re-draws it onto a canvas with its own JavaScript rendering code — a re-implementation of the browser's layout and paint. Anything it has not implemented (many CSS properties, some fonts and filters, complex stacking) silently renders differently or not at all. HTML to Image runs your markup through actual Chrome, so the capture is the browser's own paint, not an approximation of it.
A classic html2canvas trap: cross-origin images taint the canvas and either break the export or come out blank, unless every asset ships correct CORS headers and you configure proxies. Server-side rendering has no tainting concept — the page loads its assets the way any browser tab would, and the capture includes all of them.
When the capture must include client-only state that exists nowhere else — a canvas the user has drawn on, or a deeply interactive widget mid-session — and near-enough fidelity is acceptable. Feedback-widget screenshots are the textbook case. For anything user-facing or brand-facing, where the pixels have to be right, re-rendering server-side is the reliable path.
Send the same markup to the HTML endpoint instead of pointing html2canvas at the DOM node — most apps can render the shareable version of a component to an HTML string server-side. If the content lives at a URL, use the Screenshot endpoint with a selector to capture just that element. Either way the response is a CDN URL, replacing the toDataURL-and-upload dance.
The free tier covers 25 renders a month with no credit card. Send the markup html2canvas mangles and compare the output.
Share cards without the canvas. Twenty-five pre-built designs rendered from JSON in real Chrome, hosted on a CDN.