Embedded fonts don't reflect in the generated png in node example

Attach (recommended) or Link to PDF file here:

There is no link to the pdf as i’m running an example located in pdf-dist repo. Example link : https://github.com/mozilla/pdf.js/tree/master/examples/node/pdf2png

Configuration:

• Web browser and its version: Chrome
• Operating system and its version: Macos
• PDF.js version: I could not fin the version as it is directly linked in the example https://github.com/mozilla/pdf.js/blob/54ca67d6282e264814bbf91bbe3d4bfb87b5129f/examples/node/pdf2png/pdf2png.js#L51
• Is a browser extension: No

Steps to reproduce the problem:

1. Open node example located in https://github.com/mozilla/pdf.js/tree/master/examples/node/pdf2png

2. Install the dependencies and build the PDF.js library: npm install gulp dist-install

   Install the Node canvas library and run the example to convert the first page of a PDF file to a PNG image: npm install canvas

cd examples/node/pdf2png node pdf2png.js

What is the expected behavior? (add screenshot)

• I was expecting the fonts to be applied to text in output.png but it is only being applied to the sample text i added to the canvas context.
• For your reference the sample text is Everyone hates this font and it’s in orange color. I have titled the output image so we could see this text and since it has a big font size only the word every is visble

What went wrong? (add screenshot)

1. I’m running the node example located in https://github.com/mozilla/pdf.js/tree/master/examples/node/pdf2png
2. I added a sample text to the canvas like context.fillText('Everyone hates this font :(', 250, 10) . The text within the output that gets generated (ie output.png) remains unaffected where the text i added which is in orange colour in context appears in the newly registered font.

Here is the whole code :

Canvas.registerFont(path.resolve('assets', 'fonts', 'Anton-Regular.ttf'), { family: 'Anton' });

    var canvas = Canvas.createCanvas(width, height);
    var context = canvas.getContext("2d");

    context.font = '200px "Anton"'
    context.rotate(0.2);
    context.fillStyle="orange";
    context.fillText('Everyone hates this font :(', 250, 10)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

[timvandermeij]

Closing since this is in fact a duplicate of issue #4244 and maybe even issue #11637 which is tracking the standard fonts addition, so everything related to this issue is already tracked in there. To keep the discussions in one place, it’s common to close duplicates.

In general fonts need to be embedded in the PDF file to ensure a consistent display across viewers and devices. If you don’t do this you’re taking a risk, and there is no guarantee at all that viewers will be able to display the PDF file properly.

[Snuffleupagus]

All i’m asking you is add support for all the standard fonts in your pdf-dist js library […]

Again, that’s already being tracked elsewhere and simply repeating this (and opening duplicate issues) isn’t really helpful in general.