Font rendering problem

[antucg]

Hi I don't use node-canvas directly, but fabric.js instead. This framework uses node-canvas. I posted a problem in their github repo: fabricjs/fabric.js#5296.

Basically the problem is related to the different way a font is rendered in the frontend and backend.
This is the image I have in my browser (OSX, Chrome).

Black and purple text layers are touching the vertical lines. This is the image once it is rendered with node canvas (Docker, linux image).

As you can see, purple text doesn't touch lines. Black text's right edge doesn't touch either. I have been told that this is due to the way that text is measured in node-canvas. Is there any solution or anything I can do to improve this behaviour?

Thanks.

[zbjornson]

This is probably #331 (metrics are off). What does your code look like? Are you using .fillText(string, x, y, maxWidth) (with the maxWidth arg) to get that layout?

[antucg]

Yes, I think it is the same problem. I don't use node-canvas directly. It is all done through fabric.js. That other post was created by kangax, the developer that started (or collaborates with) fabric.js. So it seems to be a recurring issue. Any idea if this will be fixed?

Thanks.

[asturur]

i wish we could identify a recurring pattern of metrics differences and counter fix them

[zbjornson]

@asturur do you know what Canvas code is running within fabric.js for this case? A simple repro would be useful.

[asturur]

For this particular case not ( author ahould disclose it ).
But fabricjs also run on 1.x since uses node canvas through jsdom.

i can try to reproduce failing code snippets of text, i have seen many