Node-canvas fonts

[Andrekarma]

Hi,

i'm having a lot of trouble finding a way to obtain the exact same image result from a canvas in the browser and on server side. (node canvas version 2.10.2)

The main problem is with my custom fonts, that are correctly registered with node-canvas.
But the final results has small differences in the fonts rendering from the browser.

Anyone has faced this issue? Is there a solution/alternative to node-canva?
Any help would be great thanks! :)

[asturur]

Font implementation is browser and OS dependant sadly.
1 - compare the output with firefox, it has the most similar rendering engine to node-canvas ( cairo + pango )
2 - are you rendering on node on the same machine or at least the same OS? difference in font configuration like font smoothing can have a role sometimes

I see the difference is mostly in spacing. Are you using letter spacing by chance?

[Andrekarma]

The machine is the same Windows machine and i am not using any letter spacing on those textbox.
There is a difference in the rendering between Chrome and Firefox, but the result with node-canvas still differs from both.

I think the problem relies mostly on Pango:
The image i sent has been done using node-canvas 2.10.2 with Pango 1.50.11
Moving to node-canvas 2.11.2 with Pango 1.50.14 i can see more accuracy on some fonts, but most of them are not rendered giving a "Pango-WARNING **: 11:56:04.851: couldn't load font "

So maybe with the latest version of pango there is a more faithful rendering, but this error on most fonts is preventing us from testing it (i did try to build the node-canvas library with pango 1.54.0)

[asturur]

are you using shadow? There is a combination of effects that requires cache.
I have headache with all that negations there. That is an old version hopefully.
Also i don't see stroke on your pdf at all, what stroke are you using?

[asturur]

is black text on grey button

[Andrekarma]

There is a black stroke on black text with strokeWidth = 1, so it is not really visible.
And no shadows at all
Here is more visible

elemento_Genius_TV_Admin28022025.pdf

[asturur]

if there is black stroke and black text, outside not being necessary, there could be just the issue that you have Shadow as null, that triggers the 'type object' just set the shadow as undefined and see if that was the issue.

If this is a commercial project consider upgrading too. I think you are o a very old version anyway

[Andrekarma]

Setting the shadow from null to undefined gives the text but removes the stroke