Categories
JavaScript Answers

How to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?

Spread the love

Sometimes, we want to capture HTML Canvas as gif/jpg/png/pdf with JavaScript.

In this article, we’ll look at how to capture HTML Canvas as gif/jpg/png/pdf with JavaScript.

How to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?

To capture HTML Canvas as gif/jpg/png/pdf with JavaScript, we call the toDataURL method.

For instance, we write

const canvas = document.getElementById("mycanvas");
const image = canvas.toDataURL("image/png");

to get the canvas with getElementById.

Then we call toDataURL with 'image/png' to return a base64 string with the canvas content in png format.

Conclusion

To capture HTML Canvas as gif/jpg/png/pdf with JavaScript, we call the toDataURL method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *