Skip to content
Get packs

html2canvas

JavaScript library that renders a web page or part of it into a canvas image in the browser.

GitHub Download v1.4.1
Stars
31.9k
Forks
4.9k
Licence
MIT
Language
TypeScript
Last update
2.3 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

html2canvas is a JavaScript library that takes a 'screenshot' of a webpage or a section of it directly in the user's browser. It reads the page's DOM and the styles applied to elements, then draws them onto a canvas element, so no server-side rendering is needed. The README notes the result may not be exactly accurate to the real page, since it is rebuilt from page information rather than captured from the screen.

  • Render a whole document.body or a single element to a canvas and append it to the page
  • Let users capture a visible section of a web page as a canvas image
  • Pass options to html2canvas(element, options) to control the rendering, as described in the project's homepage docs

Great for

  • Front-end developers who want to let users save or export part of a page as an image
  • Developers building in-browser tools that need a picture of rendered HTML
  • Projects where the image must be created on the client rather than a server
  • Teams who can accept approximate rendering in exchange for keeping work in the browser

Not ideal for

  • Projects needing pixel-perfect captures: the README says output may differ from the real representation because it rebuilds the page rather than taking a true screenshot
  • Node.js server-side rendering: the README says it is heavily browser-dependent and not suitable for Node.js
  • Production applications: the README describes the script as very experimental and says the author does not recommend production use yet
  • Cross-origin content without setup: the library does not bypass browser content policies, so a proxy is needed for content from other origins
Step-by-step guide: how to use html2canvasInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: A modern web browser · Promise support, or a Promise polyfill such as es6-promise for older browsers · Node.js and npm, only if building from source

    Clone the repository

    git clone git://github.com/niklasvh/html2canvas.git

    Install dependencies

    npm install

    Build the browser bundle

    npm run build
  2. 2

    Run it

    • Download a ready build from the releases page, or install dependencies and build from source
    • Include the html2canvas script in your HTML page
    • Call html2canvas(document.body) in your code
    • Use the returned Promise's then handler to receive the canvas and add it to the page
  3. 3

    Get the most out of it

    • Use the test console on the homepage to see how different elements render before integrating
    • Set up a proxy (see the project's wiki on proxies) if you need cross-origin content
    • Include a Promise polyfill when supporting older browsers
    • Check the CSS property support before relying on a specific style, since unsupported properties will not render

Downloads

Source code (.zip)master branch · straight from GitHubRelease v1.4.13 files incl. html2canvas.jsOfficial website & docshtml2canvas.hertzen.com/

Strengths

  • Runs entirely in the browser, so no rendering server is required
  • Simple promise-based API: call html2canvas(element) and use the returned canvas
  • MIT licensed with a large community (about 32k stars on GitHub)

Trade-offs

  • The README calls the project very experimental and warns of major future changes
  • Each CSS property must be manually supported, so some styles are not rendered
  • Cross-origin images and content require a proxy to load under the same-origin policy

How it compares

ProjectStarsTypeLevelUpdatedBest for
html2canvas (this)31.9kLibrarybeginner2.3 years agoFront-end developers who want to let users save or export part of a page as an image
preact39kLibraryintermediate4 days agoWeb developers who already know React and want a lighter library
leptos21.5kLibraryadvanced4 days agoRust developers who want to build full web apps in one language
partytown13.8kLibraryintermediate7 days agoSite owners whose pages are slowed by analytics or marketing third-party scripts
cheerio30.5kLibrarybeginner4 days agoJavaScript developers who already know jQuery-style selectors
jsoup11.4kLibraryintermediate8 days agoJava developers who need to scrape or extract data from web pages

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.