HTML2Canvas is a JavaScript library created by Niklas von Hertzen. It allows users to take “screenshots” of webpages directly from their browsers.
Is it free?
YES! HTML2Canvas is licensed under the MIT license thus it is available free of charge to anyone who needs it. Also, there are no restrictions whatsoever to to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the code.
How does it work?
HTML2Canvas works by reading through the DOM of the entire page. It gathers information on all the elements of that page then builds a representation of the page. In other words, it does not actually take a screenshot of the page creates a representation of that page based on the information it gathered from the DOM.

Limitations
Because, HTML2Canvas “merely” creates a representation, it cannot fully render all CSS properties. For a full list of supported CSS properties, check out the supported features page.
Why would you need it?
There are a number of reasons why you may need a screenshot in your website. For one, you may want to integrate it as part of your webapp’s customer care system, or you may just want to have a screenshot functionality because it fun to have. Either way, HTML2Canvas is the perfect tool for the job.
Basic HTML2Canvas Usage
Step 1. Download the HTML2Canvas Javascript Library
You may download the latest version of the HTML2Canvass library here:
- Zip [full javascript] [minified];
- GitHub [full javascript] [minified]
The example will also be provided for download below.
Step 2. Select/Create your HTML webpage and attach the HTML2Canvas Javascript Library
This is the test webpage.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>HTML2Canvas Test Page</title> <link rel='stylesheet' href='css/style.css'/> </head> <body> <!-- This is what will be captured for the screenshot. --> <div id="capture"> <h2>HTML2Canvas Test Page, Hello World!</h2> <img src='images/htm2canvas-blockdiagram-samgalope-com.jpg'/> </div> <br/><br/> <!-- This is where the screenshot will be displayed. --> <div id="sam"></div> <!-- This is where the html2canvas javascript is referenced. --> <script src='js/html2canvas.min.js'></script> </body> </html> |
Step 3. Execute the HTML2Canvas Javascript Library
The example above merely includes the javascript library. Another JavaScript code is needed to “tell” the HTML2Canvas what to do. Add the code below to the bottom of the page just before the closing </body> tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- EXECUTE EXECUTE EXECUTE --> <script> /* * This tells the webpage to 1. Use the html2canvas library; * 2. Tell the library to get the contents of the source div. <div id="capture"></div> * 3. Then make an image and put it in the target div. <div id="sam"></div> */ //Define the what to copy (source) and var source = document.querySelector("body"); //where to store the image (target) var target = document.querySelector("#sam"); //Execute html2canvas library html2canvas(source).then(canvas => { target.appendChild(canvas); console.log(canvas); }); </script> <!-- ./EXECUTE EXECUTE EXECUTE --> |
Step 4. Put it all together
The the code below shows how the entire page will look like complete.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>HTML2Canvas Test Page</title> <link rel='stylesheet' href='css/style.css'/> </head> <body> <div id="capture"> <h2>HTML2Canvas Test Page, Hello World!</h2> <img src='images/htm2canvas-blockdiagram-samgalope-com.jpg'/> </div> <br/><br/> <div id="sam"></div> <script src='js/html2canvas.min.js'></script> <script> /* * This tells the webpage to 1. Use the html2canvas library; * 2. Tell the library to get the contents of the source div. <div id="capture"></div> * 3. Then make an image and put it in the target div. <div id="sam"></div> */ //Define the what to copy (source) and var source = document.querySelector("body"); //where to store the image (target) var target = document.querySelector("#sam"); //Execute html2canvas library html2canvas(source).then(canvas => { target.appendChild(canvas); console.log(canvas); }); </script> </body> </html> |
Step 5. Download the entire project files and play with it (Zip file).
Intermediate HTML2Canvas Usage (Click to Download)
HTML2Canvas Click Button to Download the Screenshot. This implementation of HTML2Canvas utilizes event triggers. In this case, the “click” mouse trigger. Once the user clicks on the screen shot button, the screenshot image is automatically downloaded to the user’s computer.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <title>HTML2Canvas Test Page2</title> <link rel='stylesheet' href='css/style.css'/> </head> <body> <div id="capture"> <h2>HTML2Canvas Test Page, Hello World! Click the button to download!</h2> <img src='images/htm2canvas-blockdiagram-samgalope-com.jpg'/> </div> <button id="take-a-screenshot">Take a screenshot</button> <br/><br/> <div id="sam"></div> <script src='js/html2canvas.min.js'></script> <script> /* * This tells the webpage to 1. Use the html2canvas library; * 2. Tell the library to get the contents of the source div. <div id="capture"></div> * 3. Then make an image and put it in the target div. <div id="sam"></div> */ //Define the what to copy (source) and var source = document.querySelector("#capture"); //where to store the image (target) var target = document.querySelector("#sam"); //Now let's click a button to execute html2canvas var button = document.querySelector("#take-a-screenshot"); button.onclick = function(){ //Execute html2canvas library html2canvas(source).then(canvas => { //target.appendChild(canvas); saveAs(canvas.toDataURL(), 'canvas.png'); }); }; //Save as function. This allows the automatic downloading of the screenshot. function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = uri; link.download = filename; //Firefox requires the link to be in the body document.body.appendChild(link); //simulate click link.click(); //remove the link when done document.body.removeChild(link); } else { window.open(uri); } } </script> </body> </html> |
Download the entire project files (2) and play with it (Zip file).
References:
- HTML2Canvas: https://html2canvas.hertzen.com/
- Document Object Model: https://www.w3schools.com/js/js_htmldom.asp
- OnClick event: https://www.w3schools.com/jsref/event_onclick.asp
- For canvas to direct download: https://stackoverflow.com/questions/41165865/download-html2canvas-image-to-desktop
- Cover art by Kaique Rocha: https://www.pexels.com/@kaiquestr
Wonderful! Would love to try this
Let me know what you come up with.