html2canvas alternatives
Server-side HTML-to-image with real Chromium rendering.
What html2canvas is
html2canvas (v1.4.1) is a client-side JavaScript library that reads your DOM and CSS, then recreates the visual output by drawing on an HTML Canvas element. It is not a screenshot — it reinterprets the page using Canvas 2D drawing commands. The result looks similar but can differ from what Chrome actually renders.
It is useful for one specific use case: capturing a DOM element as an image from within a running browser tab. Outside that context, it cannot be used.
Limitations of html2canvas
- Browser-only — depends on
window,document, and Canvas APIs. Cannot run in Node.js, Deno, Bun, or serverless environments. - Canvas approximation — not a real screenshot. CSS rendering gaps include
backdrop-filter, complexbox-shadowvalues, SVG with external references, and sometransformcombinations. - Cross-origin images blocked — images from other domains require CORS headers set by those servers.
- No URL capture — can only capture DOM elements already loaded in the browser; cannot screenshot an arbitrary URL.
- No iframes — cross-origin iframes are not rendered.
When html2canvas is the right choice
html2canvas is a good fit when you need to let users export a visible section of your web app as an image — think "save as image" buttons, client-side report exports, or browser-based diagram tools. Zero server infrastructure needed.
Server-side alternatives
For generating images outside a browser — OG images, invoice PDFs, automated reports, visual regression testing in CI — you need a real headless browser.
| Tool | Type | Engine | Cost | Self-hosted |
|---|---|---|---|---|
| Openkova | Self-hosted REST API | Chromium (current) | Free / MIT | ✓ |
| Puppeteer | Node.js library | Chromium | Free | ✓ |
| Playwright | Node.js library | Chromium / Firefox / WebKit | Free | ✓ |
| Urlbox | Hosted SaaS API | Chromium | Paid | ✗ |
| ScreenshotOne | Hosted SaaS API | Chromium | Paid | ✗ |
Openkova vs html2canvas
| Feature | html2canvas | Openkova |
|---|---|---|
| Runs server-side | ✗ | ✓ |
| True Chromium rendering | ✗ — Canvas approximation | ✓ — pixel-accurate |
| CSS custom properties | Limited | ✓ |
| CSS Grid | Limited | ✓ |
| Cross-origin images | ✗ requires CORS | ✓ |
| Capture arbitrary URLs | ✗ | ✓ |
| REST API | ✗ | ✓ |
| HTML snippet mode | ✓ in-browser | ✓ server-side |
| License | MIT | MIT |
| Cost | Free | Free |
Getting started with Openkova
git clone https://github.com/scnix-git/openkova
docker compose upConvert an HTML snippet to PNG:
curl -N -X POST http://localhost:3000/api/convert/snippet \
-H "Content-Type: application/json" \
-d '{"html": "<h1 style=\"font-family:sans-serif\">Hello</h1>"}'See the API documentation for the full endpoint reference and SSE streaming format, or how Openkova works for the rendering pipeline.
Frequently asked questions
Can html2canvas be used in Node.js?
No. html2canvas depends on browser APIs (window, document, Canvas) that do not exist in Node.js. For server-side use, switch to Puppeteer, Playwright, or a self-hosted API like Openkova.
What is the difference between html2canvas and Puppeteer?
html2canvas redraws the DOM on a Canvas element — it is an approximation. Puppeteer controls a real headless Chromium browser and captures actual screenshots. Puppeteer produces pixel-accurate results identical to what Chrome renders.
Is there a free server-side alternative to html2canvas?
Yes. Openkova is free and MIT-licensed. Puppeteer and Playwright are also free open-source Node.js libraries. Openkova adds a REST API layer on top of Puppeteer so any language or service can call it over HTTP.
Does Openkova support modern CSS?
Yes. Openkova uses headless Chromium — the same engine as Google Chrome. CSS Grid, CSS custom properties, Flexbox, backdrop-filter, and all other Chromium-supported features work correctly.