/canvas2pdf

Export your HTML canvas to PDF

Primary LanguageJavaScriptMIT LicenseMIT

Canvas2PDF

Canvas2PDF exports your HTML canvas as PDF using JavaScript. Note that this library generates actual PDF drawing calls to create a PDF with vector graphics, unlike some alternate libraries which rasterize your canvas and place it as an image in your PDF.

How it works

We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we use PDFKit to generate a PDF document.

Browser Usage

//Create a new PDF canvas context.
var ctx = new canvas2pdf.PdfContext(blobStream());

//draw your canvas like you would normally
ctx.fillStyle='yellow';
ctx.fillRect(100,100,100,100);
// more canvas drawing, etc...

//convert your PDF to a Blob and save to file
ctx.stream.on('finish', function () {
    var blob = ctx.stream.toBlob('application/pdf');
    saveAs(blob, 'example.pdf', true);
});
ctx.end();

Node Usage

PDFDocument = require('pdfkit')
const fs = require('fs')
const canvas2pdf = require('canvas2pdf')

const file = fs.createWriteStream('example.pdf')
//Create a new PDF canvas context.
const ctx = new canvas2pdf.PdfContext(file)

//draw your canvas like you would normally
ctx.fillStyle = 'yellow'
ctx.fillRect(100, 100, 100, 100)
// more canvas drawing, etc...

ctx.stream.on('finish', function () {
  file.end()
})
ctx.end()

Dependencies

Using with node.js

canvas2pdf works with node.js. Note that neither a DOM or canvas library is needed.

Interactive Browser Demo

Open Demo

Notes

  • Inspired by Canvas2Svg
  • Calling fill and then stroke consecutively only executes fill
  • Some canvas 2d context methods are not implemented yet (e.g. setTransform and arcTo)

Status

Build Status

License

MIT

Developer Dependencies

  • Ghostscript and GraphicsMagick are required for running tests