Sometimes, we want to fix HTML2Canvas only rendering what is visible on screen with JavaScript.

In this article, we’ll look at how to fix HTML2Canvas only rendering what is visible on screen with JavaScript.

How to fix HTML2Canvas only rendering what is visible on screen with JavaScript?

To fix HTML2Canvas only rendering what is visible on screen with JavaScript, we set the scrollY value.

For instance, we write

const canvas = await html2canvas(htmlSource, { scrollY: -window.scrollY });
const img = canvas.toDataURL();
window.open(img);

to call html2canvas with an object that sets scrollY to -window.scrollY so that we position htmlSource is moved so that the whole htmlSource element will be rendered on the canvas.

Then we call canvas.toDataURL to return the base64 string with the rendered element’s image.

Conclusion

To fix HTML2Canvas only rendering what is visible on screen with JavaScript, we set the scrollY value.