---
canonical: 'https://htmlcsstoimage.com/compare/html2canvas'
title: 'HTML/CSS to Image vs html2canvas: Features & Costs'
description: 'html2canvas redraws the DOM onto a canvas in the visitor''s browser. HTML/CSS to Image uses a full browser engine and returns a hosted image.'
---

# HTML/CSS to Image vs html2canvas

html2canvas is a free library that redraws part of a page onto a canvas in the visitor's browser. HTML/CSS to Image renders on a server, so every visitor gets the same image, with hosting and the CSS html2canvas can't draw.

[View this comparison on the website](https://htmlcsstoimage.com/compare/html2canvas)

## The short answer

**Choose HTML/CSS to Image if:**

- You need hosted images for share links, og:image, or emails.
- Your design uses CSS html2canvas doesn't draw, like box-shadow, filter, or object-fit.
- Every visitor should get the same result, whatever their device.
- Images are generated without a visitor, from a background job or a webhook.

**Choose html2canvas if:**

- The image never leaves the page, like a "download as PNG" button.
- You can't add a server or an API key.
- The design stays within the CSS it supports.

## Where they overlap

Both turn HTML and CSS into a PNG from code. If you're building a "download as image" button or a share card from part of a page, either one can produce it.

## What html2canvas is good for

It runs in the visitor's browser, without a rendering server or API key, and it's free under the MIT license. For a "save this chart as an image" button on a page you control, that's hard to beat.

## What "not a real screenshot" means

html2canvas reads the DOM and redraws it on a canvas, so the result can differ from what the browser shows. Its own FAQ says it will never have full CSS support.

- `box-shadow`, `filter`, `object-fit`, `mix-blend-mode`, and `border-image` aren't drawn, and transforms have limited support.
- Cross-origin images need CORS or a proxy. Without them, they're left out, or they taint the canvas so it can't be exported.
- Output varies by device: `scale` defaults to the device pixel ratio, and browsers cap canvas size, so very tall captures can come out blank or cut off.
- It renders the current page in a browser and isn't suitable for Node.js.

The latest release, 1.4.1, is from January 2022, and the README still describes the project as very experimental.

## Rendering on a server instead

HTML/CSS to Image renders your HTML/CSS with a full browser engine on its servers, so the image looks the same no matter who requests it, and CSS like `box-shadow` and `filter` works as it does in a browser.

You get a hosted URL you can share, embed, or put in `og:image`, plus PDFs, URL screenshots, and templates. The trade-off is an API call: send the element's HTML and CSS to HTML/CSS to Image instead of drawing it from the visitor's page.

## Pricing

html2canvas is free under the MIT license and runs on your visitors' devices, so there's no rendering bill. If you need the image outside the page, uploading and hosting it is up to you. HTML/CSS to Image charges per created image, with server-side rendering and hosting included.

### Getting started

**HTML/CSS to Image:** $14/month for 1,000 images on Basic.

Includes templates, the visual editor, and hosted image delivery. A free plan includes 50 images per month.

**html2canvas:** Free and open source under the MIT license.

Rendering runs on your visitors' devices.

### A production image service

**HTML/CSS to Image:** $69/month for 10,000 images on Basic.

Optional overages cost $10 per 1,000 images. Includes templates, hosted image delivery, storage destinations, and bring-your-own proxies at this volume.

**html2canvas:** No per-image cost. Storing and serving any images you keep is up to you.

html2canvas can't generate images without a visitor's browser.

## Common questions

### Why doesn't html2canvas render box-shadow?

html2canvas redraws the page from the DOM instead of taking a real screenshot, and box-shadow is on its list of unsupported properties, along with filter, object-fit, and mix-blend-mode. HTML/CSS to Image renders with a full browser engine, so those properties work.

### Why are images missing from my html2canvas output?

Cross-origin images need CORS headers or a proxy. Without them, html2canvas leaves them out, or taints the canvas so it can't be exported. HTML/CSS to Image takes a real browser screenshot, so there's no canvas to taint, and images that load on the page appear in the result.

### Can html2canvas run on a server?

No. Its README says it isn't suitable for Node.js, because it depends on the browser. To generate images on a server, send the HTML/CSS to HTML/CSS to Image instead.

### Is html2canvas still maintained?

Its latest release, 1.4.1, is from January 2022, and the README describes the project as very experimental.

## Comparison details

### CSS support

**HTML/CSS to Image:** Render HTML/CSS with a full Chromium browser engine, including grid, z-index, calc(), box-shadow, filters, and web fonts.

Send your HTML/CSS directly or capture a webpage URL, using the same browser rendering model as your site.

**html2canvas:** Supports common properties like flexbox, borders, and positioning, with limited transform support. box-shadow, filter, and object-fit aren't supported.

Its FAQ says it will never have full CSS support.

HCTI renders HTML/CSS with a full browser engine.

### Image hosting and reuse

**HTML/CSS to Image:** Hosting and CDN delivery are included. Application-level caching keeps an existing image URL reusable, even after a CDN cache miss, without consuming another image credit.

Paid plans keep images while your account is active. Custom-storage-only images use your own delivery.

**html2canvas:** Returns a canvas element in the page. Uploading and hosting the image is up to you.

HCTI returns a hosted image URL.

## Research and sources

Last reviewed: 2026-09-30

Reviewed the html2canvas website, supported-CSS list, configuration reference, FAQ, README, and release history alongside HCTI documentation. This compares a client-side rendering library with a server-side image API, not rendering speed or visual quality. No comparative renders were performed.

- [html2canvas README](https://github.com/niklasvh/html2canvas) (checked 2026-09-30)
- [HCTI API reference](https://docs.htmlcsstoimage.com/getting-started/using-the-api/) (checked 2026-09-22)
- [HCTI render readiness](https://docs.htmlcsstoimage.com/parameters/render_when_ready/) (checked 2026-09-22)
- [html2canvas documentation](https://html2canvas.hertzen.com/documentation) (checked 2026-09-30)
- [html2canvas supported CSS](https://html2canvas.hertzen.com/features) (checked 2026-09-30)
- [html2canvas FAQ](https://html2canvas.hertzen.com/faq) (checked 2026-09-30)
- [html2canvas configuration](https://html2canvas.hertzen.com/configuration) (checked 2026-09-30)
- [html2canvas releases](https://github.com/niklasvh/html2canvas/releases) (checked 2026-09-30)
- [HCTI plans and pricing](https://htmlcsstoimage.com/pricing) (checked 2026-09-30)
- [HCTI storage destinations](https://docs.htmlcsstoimage.com/guides/advanced/storage-destinations/) (checked 2026-09-22)

## Try it out

[Try the live image demo](https://htmlcsstoimage.com/compare/html2canvas#demo)

## Related comparisons

- [HTML/CSS to Image vs Puppeteer](https://htmlcsstoimage.com/compare/puppeteer.md)
- [HTML/CSS to Image vs Vercel OG](https://htmlcsstoimage.com/compare/vercel-og.md)
- [HTML/CSS to Image vs URL2PNG](https://htmlcsstoimage.com/compare/url2png.md)
- [HTML/CSS to Image vs Screenshot Machine](https://htmlcsstoimage.com/compare/screenshot-machine.md)
- [HTML/CSS to Image vs Browserless](https://htmlcsstoimage.com/compare/browserless.md)
- [HTML/CSS to Image vs ScreenshotAPI.net](https://htmlcsstoimage.com/compare/screenshotapi-net.md)

## Get started

[Start creating free](https://htmlcsstoimage.com/join) · [Pricing](https://htmlcsstoimage.com/pricing.md) · [Documentation](https://docs.htmlcsstoimage.com)

We tried to make this an honest and fair comparison. We last updated the details on September 30, 2026. If you represent html2canvas and want to correct the record, please [email us](mailto:support@htmlcsstoimage.com).