context2d (c2d) Plugin

The c2d plugin allows the use of the HTML5 CanvasRenderingContext2D interface to add content to your PDF. The current implementation offers additional native PDF methods that are not included in jsPDF, including arc(), strokeText(), textBaselines, the ability to save and restore contexts, use of CSS color names, and incremental path building.

Usage

Include the plugin script after the jsPDF script in your HTML file.

The plugin creates a c2d object in the pdf.

var pdf = new jsPDF('p', 'pt', 'letter');
var c2d = pdf.c2d;

After obtaining the c2d object, you can use it.

c2d.setFont("10pt times bold");
c2d.fillText("Hello PDF", 20, 20);

c2d.save();
c2d.setFillStyle('blue');
c2d.fillRect(20, 20, 50, 50);
c2d.restore();

For information on using the c2d methods, see http://www.w3.org/TR/2dcontext/

You can see a live example here: http://htmlpreview.github.io/?https://rawgit.com/Flamenco/jsPDF/html2pdf/test/test_context2d.html

Supported Methods

Context Stack

• save
• restore

Drawing

• fillRect
• strokeRect
• clearRect
• rect
• fillText
• strokeText
• drawImage
• setFont
• setFillStyle
• setStrokeStyle

Path Based

• moveTo
• lineTo
• arc
• stroke
• fill
• beginPath
• endPath

Unsupported Methods

Issues

• setFillStyle and setStrokeStyle support #000000 color notation, rgb, rgba, and CSS color names.
• setFont only supports pt, px, and em size (e.g. '10pt times')
• clearRect currently calls fillRect with white
• fill and stroke paths only work with EITHER lines, rects, or arcs (do not mix in a single path)