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:
This is how it's being displayed in the PDF: (Ignore the slightly greys in a few areas, it's watermarks)
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.
After debugging the library and found this issue from 2014
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();