DEV Community

Cover image for Take Screenshot Of HTML Element Using JavaScript

Posted on • Updated on • Originally published at

Take Screenshot Of HTML Element Using JavaScript

Hello everyone πŸ‘‹

A few months back, I was working on a web-based project where a feature was required that is to take a screenshot of an HTML div in the browser and show it to the user. I was like, sorry this is not possible. Then I did some research and got to know about this library called html2canvas.

So in this article, I will show how can we capture a screenshot of a web page or any element of it using html2canvas.



Include the html2canvas.min.js file in your HTML file.

<script src="./html2canvas.min.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Now we will use the html2canvas method to capture the screenshot of our web page or the HTML element.

html2canvas(document.getElementById("main"), {
  allowTaint: true,
  useCORS: true,
.then(function (canvas) {
  // It will return a canvas element
  let image = canvas.toDataURL("image/png", 0.5);
.catch((e) => {
  // Handle errors
Enter fullscreen mode Exit fullscreen mode

The html2canvas method takes two arguments

  • first is the HTML element whose screenshot you want.
  • second is a configuration object.

In the configuration object, we are using

  • allowTaint to allow cross-origin images to taint the canvas.
  • useCORS to attempt to load images from a server using CORS.

You can find the available configuration options here.

Then we are converting the returned canvas into a base64 image URL using the toDataUrl method which expects two arguments

  • type : image format.
  • encodingOptions : number between 0 and 1 indicating the image quality.

And that's it, we captured the screenshot of our HTML element.


This library has some issues, some of them are mentioned in the docs. I recommend going through it and understand it before using it in any production-based environment.

If you are aware of other ways to achieve a similar kind of result, please feel free to share.


Check out the GitHub Repo.

Try it out here: Live.

Originally published on

Thank you for reading πŸ™

If you enjoyed this article or found it helpful, give it a thumbs-up πŸ‘

Feel free to connect πŸ‘‹

Twitter | Instagram | LinkedIn

If you like my work and want to support it, you can do it here. I will really appreciate it.

Top comments (10)

shash7 profile image
Shashwat amin

Is there any other robust alternative to html2canvas?

dashpilot profile image
chris_hayes profile image
Chris Hayes

html-to-image worked better for me. The screenshots from html2canvas had styling issues where it didn't match what the page was showing. html-to-image was pretty much 1-for-1, the one thing I had to do was put a background color on the element I was imaging, or else it defaults to transparent regardless of what's behind the element.

rajeshkumaryadavdotcom profile image


bibekkakati profile image


eissorcercode99 profile image
The EisSorcer

I don't understand. How is this commonly used?

ausginer profile image
Vlad Rindevich

I would think of using it in e2e tests.

bibekkakati profile image

That could be a good use case @ausginer .

bibekkakati profile image

I used it to show a smaller preview of a larger div section.

shyamdadhaniya_89 profile image

can we take the full webpage screenshot using html2Canvas?