CanvasToPDF

CanvasToPDF can create vector quality PDF images using the canvas API.

How it works

Internally, CanvasToPDF uses modified versions of canvas2pdf and PDFKit to call on actual PDF drawing methods. CanvasToPDF has several notable improvements from canvas2pdf in that it has no issues calling fill and stroke consecutively and that reading canvas properties do not lead to errors. Thus, you can create vectorized PDFs such as the one below.

CanvasToPDF internally manages a mock 2d canvas context. Thus, you only need to pass a draw function calling on canvas commands and not the canvas itself.

Dependencies

• canvas2pdf
• PDFKit
• blob-stream

Usage

CanvasToPDF currently only supports client-side usage. You can use this library similar to the manner below.

Sample Code for Using CanvasToPDF

import canvasToPDF from "@pdftron/canvas-to-pdf";
import saveAs from "./FileSaver";

const draw = (ctx) => {
  // canvas methods
};

canvasToPDF(draw, { width: 100, height: 150 }).then((res) => {
  saveAs(res, "example.pdf", true);
});

The canvasToPDF function returns a blob containing vector graphics based PDF file, but since it is difficult to check that the blob has the expected images drawn you can use FileSaver to download an actual PDF as seen in the code above.

Sample Code for Drawing Vector PDF

const draw = (ctx) => {
  for (let i = 0; i < 12; i++) {
    for (let j = 0; j < 12; j++) {
      ctx.strokeStyle = `rgb(
    0,
    ${Math.floor(255 - 42.5 * i)},
    ${Math.floor(255 - 42.5 * j)})`;
      ctx.beginPath();
      ctx.arc(25 + j * 40, 25 + i * 40, 15, 0, Math.PI * 2, true);
      ctx.stroke();
    }
  }
};

The above code will draw multiple circles with gradient borders:

License

MIT

Notes

• Some canvas 2d context methods are not implemented yet
• Drawing line widths of less than 1 is not supported
• Currently only supports 3 default fonts: Helvetica, Courier, and Times-Roman