diff --git a/README.md b/README.md index 5dafcf4..1922127 100644 --- a/README.md +++ b/README.md @@ -80,9 +80,51 @@ ctx.end() ## Notes + Inspired by [Canvas2Svg](https://github.com/gliffy/canvas2svg) -+ Calling fill and then stroke consecutively only executes fill ++ Calling fill and then stroke consecutively only executes fill (see *Dual Compatibility Browser Canvas and canvas2pdf* as alternative) + Some canvas 2d context methods are not implemented yet (e.g. setTransform and arcTo) +## Dual Compatibility Browser Canvas and canvas2pdf + +If you wish to write applications that can draw to either context (a browsers native canvas context or the canvas2pdf context) +and be fully compatible with each other, one should stick to the supported context API calls +provided by canvas2pdf. + +If you wish to call a fill() and stroke() consecutively, +you should use the PDF-style call fillAndStroke() instead with the following compatibility +extensions for the browser canvas: + +``` +Object.defineProperty(CanvasRenderingContext2D.prototype, 'fillAndStroke', { + value: function () { + this.fill(); + this.stroke(); + } +}); +``` + +For example, if your application used to have drawing calls similar to: + +``` +ctx.beginPath(); +ctx.arc(...); +ctx.lineTo(...); +ctx.lineTo(...); +ctx.closePath(); +ctx.fill(); +ctx.stroke(); +``` + +...you would update those calls to use fillAndStroke(): + +``` +ctx.beginPath(); +ctx.arc(...); +ctx.lineTo(...); +ctx.lineTo(...); +ctx.closePath(); +ctx.fillAndStroke(); +``` + ## Status [![Build Status](https://travis-ci.org/joshua-gould/canvas2pdf.svg?branch=master)](https://travis-ci.org/joshua-gould/canvas2pdf) diff --git a/canvas2pdf.js b/canvas2pdf.js index 79cc473..3bb562f 100644 --- a/canvas2pdf.js +++ b/canvas2pdf.js @@ -218,6 +218,11 @@ this.doc.fill(); }; + canvas2pdf.PdfContext.prototype.fillAndStroke = function () { + // From the PDFKit docs: Note that calling fill and then stroke consecutively will not work because of a limitation in the PDF spec. Use the fillAndStroke method if you want to accomplish both operations on the same path. + this.doc.fillAndStroke(); + }; + canvas2pdf.PdfContext.prototype.rect = function (x, y, width, height) { this.doc.rect(x, y, width, height); };