HackerReposA FIELD GUIDE TO OPEN SOURCE
ProSponsor the shelf♧ 0
← Back to top all-time
niklasvh
html2canvas
TypeScript2011–2022
niklasvh / html2canvas

html2canvas

Screenshots with JavaScript

13Distinct people
15Mentions
0Explicit recommenders
31.9KGitHub stars
REPOSITORY AT A GLANCE

What to know before exploring

What it is

Screenshots with JavaScript

GitHub

Where it is used

No documented product use was verified in the last source check.

What people are saying

No recommendation phrase was found in the indexed comments.

No classified warning is attached to this page. Read the discussions before treating silence as approval.

Also in these discussions

No other repository is repeatedly linked in the same discussions.

This week on Hacker News

Nov 7–Nov 14 UTC · Direct repository links and separately labeled related project stories. Indexed through 11/14/2026, 3:56:07 PM UTC.

No direct repository links were found in the indexed HN discussions over the past seven days. Older discussions are available below.

Mentions over time

HN mentions by year15 dated mentions

Observed mentions: 2011-07-27 16:56:24 UTC to 2022-10-10 23:53:20 UTC.

012342011-01-01 00:00:00 UTC to 2012-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments20112012-01-01 00:00:00 UTC to 2013-01-01 00:00:00 UTC (exclusive): 4 mentions; 0 submissions, 4 comments2013-01-01 00:00:00 UTC to 2014-01-01 00:00:00 UTC (exclusive): 3 mentions; 1 submissions, 2 comments2014-01-01 00:00:00 UTC to 2015-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments2015-01-01 00:00:00 UTC to 2016-01-01 00:00:00 UTC (exclusive): 3 mentions; 0 submissions, 3 comments2016-01-01 00:00:00 UTC to 2017-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments20162017-01-01 00:00:00 UTC to 2018-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments2018-01-01 00:00:00 UTC to 2019-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments2019-01-01 00:00:00 UTC to 2020-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments2020-01-01 00:00:00 UTC to 2021-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments2021-01-01 00:00:00 UTC to 2022-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments2022-01-01 00:00:00 UTC to 2023-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments2022

Counts come from the repository’s dated source evidence. Index cutoff: 2026-11-02 08:16:59 UTC.

View mention counts and date ranges
UTC ranges include their start and exclude their end. Select a period to filter the source evidence.
PeriodStart (UTC)End (exclusive, UTC)MentionsSubmissionsComments
20112011-01-01 00:00:00 UTC2012-01-01 00:00:00 UTC101
20122012-01-01 00:00:00 UTC2013-01-01 00:00:00 UTC404
20132013-01-01 00:00:00 UTC2014-01-01 00:00:00 UTC312
20142014-01-01 00:00:00 UTC2015-01-01 00:00:00 UTC101
20152015-01-01 00:00:00 UTC2016-01-01 00:00:00 UTC303
20162016-01-01 00:00:00 UTC2017-01-01 00:00:00 UTC000
20172017-01-01 00:00:00 UTC2018-01-01 00:00:00 UTC101
20182018-01-01 00:00:00 UTC2019-01-01 00:00:00 UTC000
20192019-01-01 00:00:00 UTC2020-01-01 00:00:00 UTC101
20202020-01-01 00:00:00 UTC2021-01-01 00:00:00 UTC000
20212021-01-01 00:00:00 UTC2022-01-01 00:00:00 UTC000
20222022-01-01 00:00:00 UTC2023-01-01 00:00:00 UTC101

What Hacker News says

15 sources
This project(at least for me) is a little bit misleading. Because it isn't rendering HTML using WebGL. It using html2canvas[0] to rasterize the browser rendering into a canvas, upload it to WebGL, apply effects and patch-back events(i.e. mouse clicks) back to the hidden browser dom elements. (On the other side, font hinting and such are not really a problem) Implementing full UI framework over WebGL has it merits, and hopefully someone will make a useful(and not html+css based) one some day. [0] https://github.com/niklasvh/html2canvas
In Render HTML via WebGL
This is a cool project- I've been working on a version of this using Sentry, a PhantomJS web scraper and a simple XHR. Admittedly, HTML2Canvas (or anything that creates <canvas> from the page so it can be screenshotted) is pretty cool and allows this great sort of annotation/selection capability where a user can choose to highlight what went wrong and provide some feedback. That's great. I found html2canvas to be really resource heavy when taking the snapshot, and there was no way to do it 'automatically'. Why does that matter? When debugging, I want history. My ideal bug-reporting tool would not only give user specs, stack traces and a screenshot, but a history of screenshots going back to an arbitrary length so I can figure out exactly what the user was doing that triggered that error. Trial and error could lead one to the correct seque
Read the rest
nce of screenshots but I've found one per 10s / 6 max (so 60s of history) to be a pretty good way to do it. So if you know you want history, how do you get it? You can't use html2canvas to just take snapshots the entire time the user is using the page (I've tried (work account on GitHub): https://github.com/niklasvh/html2canvas/pull/270). It's far too slow, memory heavy, and if done asynchronously can create really strange render bugs if the user scrolls or mutates the DOM. Some of these issues can be fixed but it will forever be slow and take a ton of CPU. So I came up with something else. At the same time I was working on a web scraper + screenshotter using PhantomJS that talked to RabbitMQ. I thought: why render the screenshot at all on the client? I have all the same resources; I can recreate the environment from source, on my own time, asynchronously, without making the client do the work for me and slowing down their browser. So the implementation I came up with does the following: 1. Maintains a rolling 5-element array of HTML snapshots (usually via document.firstChild.outerHTML), tied to setInterval. That part is easily configurable to your preference. The snapshots even contain a virtual cursor element that I just track using mousemove events. 2. On error, collects the usual data using Raven (the client-side library that reports to Sentry, the open-source error aggregator). 3. Rather than hit Sentry directly, the browser POSTs to a local route. That route separates the HTML snapshots from the Raven/Sentry data, and creates UUIDs for each snapshot to create S3 filenames. 4. The Sentry data is sent to Sentry along with the S3 filenames, and the HTML + filenames are put on a RabbitMQ queue. 5. A separate process is listening to the queue, grabs HTML off the queue and renders the page using the CSS (no scripts) from the running webserver. The screenshot is then uploaded to S3. 6. A Sentry plugin displays those images in the bug report, assuming the S3 urls are valid. They may take a while to resolve but they usually show up in < 2 minutes. Since there are a lot of moving parts, I've always wanted to create a simple devops service out of this, but I haven't had the time, being busy with other projects. But if there is interest, I could open-source some of the components.
In Front End JavaScript Error Tracking
Yeah, the iOS 7 'frosted glass translucency is impossible to achieve with CSS. Everyone points to filter: blur(), but that only blurs the element, and not items behind it. The only thing I could come up with was using something like HTML2Canvas[1] to render a portion of the DOM in a canvas/image, position that exactly on top, and then blur that. But all that seems quite convoluted and heavy, so decided not to invest any energy into it. [1]: https://github.com/niklasvh/html2canvas
In Cloning the UI of iOS 7 with HTML, CSS and JavaScript

MAKE YOURSELF AT HOME

A few shortcuts

/
Search the collection
?
Open this guide
Esc
Close dialogs and navigation

Your saved repositories and interests stay in this browser.