node.jspdfkitnode-pdfkit

PDFKit Paths with fill, stroke and opacity


I've been using PDFKit with NodeJS to generate PDFs for an application we are developing and I'm not being able to set stroke opacity and fill opacity to a path.

This is an image how it should look like: Image from the builder

This is how it's being displayed in the PDF: (Ignore the slightly greys in a few areas, it's watermarks) PDF Image

The opacity value should be 0.6 in both. This is how I'm trying to apply the fill stroke and opacity:

pdfDocument.path(pathString);
pdfDocument.lineCap('butt');
pdfDocument.lineJoin('miter');
pdfDocument.lineWidth(strokeWidth);

pdfDocument.fillOpacity(opacity);
pdfDocument.strokeOpacity(opacity);

pdfDocument.fillAndStroke(fillColor, strokeColor, fillRule);

pdfDocument.stroke();

I'm not getting why is not applying opacity to stroke and fill. I already tried using only opacity function and move both sets of the opacity around but nothing happened.


Solution

  • After debugging the library and found this issue from 2014

    Opacity #259

    Turns out that we need to set the fillColor with opacity and strokeColor with opacity before setting fillAndStroke.

    pdfDocument.path(pathString);
    pdfDocument.lineCap('butt');
    pdfDocument.lineJoin('miter');
    pdfDocument.lineWidth(strokeWidth);
    
    // HERE IS THE TRICK.
    pdfDocument.fillColor(fillColor, opacity);
    pdfDocument.strokeColor(strokeColor, opacity);
    
    pdfDocument.fillAndStroke(fillColor, strokeColor, fillRule);
    
    pdfDocument.stroke();