@pdftron/canvas-to-pdf

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 (such as lineWidth) do not lead to errors. Thus, you can create vectorized images such as the one below.

Dependencies

CanvasToPDF has one optional dependency: FileSaver. The CanvasToPDF api returns a blob containing the annotations, but since it is difficult to check that the blob has the expected images drawn you can use FileSaver to download an actual PDF.

Usage

To use the CanvasToPDF package, you will have to have a webpack environment prepared.

CanvasToPDF currently only supports client-side usage. You can use CanvasToPDF by creating an index.js file with code similar to the one below.

Sample Code for Using CanvasToPDF

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

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

canvasToPDF(draw).then((res) => {
  saveAs(res, "example.pdf", true);
});

Sample Code for Drawing Vector Appearances

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:

Sample Webpack Configuration

const webpack = require("webpack");
const path = require("path");
module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

This webpack configuration will expect an index.js file where CanvasToPDF is presumably being used and produce a bundle.js file under a dist folder. You can then directly load bundle.js in an index.html file just like any other script.

<script src="./dist/bundle.js"></script>

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