Summary

This article provides instructions on how to capture the content of an HTML canvas as an image file or PDF using JavaScript.

Abstract

The article titled "How to Capture the Content of an HTML Canvas as an Image File?" explains the process of capturing the content drawn on an HTML canvas element and converting it into an image file or a PDF document. It details the use of the toDataURL method to generate a base64 encoded image from the canvas, which can then be used to create a downloadable image file. Additionally, the article introduces the jaPDF library as a tool for converting the canvas content into a PDF format, demonstrating how to integrate the library and save the canvas as a PDF document.

Opinions

The author suggests that capturing canvas content is a useful feature when one needs to save or share the dynamically generated content.
The use of the toDataURL method is presented as a straightforward approach to capturing canvas content as an image.
The article endorses the jaPDF library for its ability to convert canvas content into a PDF format, implying that it is a reliable and easy-to-use tool for this purpose.
The author's inclusion of code examples and explanations indicates a preference for practical, hands-on learning and demonstration.
The article implies that the ability to export canvas content in multiple formats (image and PDF) is beneficial for various applications and user needs.

How to Capture the Content of an HTML Canvas as an Image File?

Sometimes we may want to capture the content of an HTML canvas as an image file.

In this article, we’ll look at ways that we can do that with JavaScript.

Capturing the Canvas

We can capture the canvas by using the toDataURL method that comes with the canvas element object.

For instance, we can write the following HTML:

<canvas></canvas>

Then we can write the following JavaScript to draw some content and capture it as an image file:

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "lightblue";
context.fillRect(50, 50, 100, 100);
window.location = canvas.toDataURL("image/png");

We get the canvas element with querySelector .

Then we get the canvas context with getContext .

Then we set the fill style with fillStyle .

And we draw a rectangle with fillRect .

Then we just call toDataURL on the canvas with the MIME type of the file we want to generate to capture the canvas and turn it into a base64 string.

Capturing the Canvas to PDF

To capture the canvas and turn it into a PDF, we can use the jaPDF library.

To use it, we write the following HTML:

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<canvas></canvas>

Then we can add the JavaScript code to do the capture by writing:

const { jsPDF } = window.jspdf;
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "lightblue";
context.fillRect(50, 50, 100, 100);
const imgData = canvas.toDataURL("image/png");
const doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample.pdf');

First we get the jsPDF object from the jspdf global variable added from the script tag.

Then the next 4 lines are the same as in the previous example.

Then we call canvs.toDataURL and assign the returned base64 string to imgData .

Next, we create a new jsPDF document object with the jsPDF constructor.

The first argument is the orientation of the document. p means portait.

The 2nd argument is the unit, and mm is millimeters.

Then we call addImage with imgData to add the image to our document.

The 2nd argument is the format.

The 3rd and 4th arguments are the x and y coordinates of the image relative to the upper edge of the page.

Then we call doc.save with the file name and extension to save the PDF.

Conclusion

We can capture a canvas’ content to an image with the toDataURL method.

And we can put the image into a PDF with the jsPDF library.