Text have extra space at top in node as compared to browser and native canvas

[aman-webdev]

So I am using Konva in node and browser both and the issue is suppose i create a text in konva (browser) it is working as expected, but in node when i export to img, each text is offset by some pixels at top even tho i am not using any offset

It's just adding some extra space at the top of text in node and am not able to figure out the cause

I am adding some examples here along with demo

browser node

I know it looks like very minor gap but with increasing font sizes this leads to issue

left is node and right is browser

browser demo: https://jsfiddle.net/ch72fsa1/ node repo : https://github.com/aman-webdev/konva-pdf-test

[aman-webdev]

Adding a side by side comparison with img created using konva and native canvas left is konva and right one is just created using canvas, you can see that the left one is down by a few pixels, created with same y coordinates

[MaxtuneLee]

I'm facing the same issue, and I found that the text baseline is alway in the center of the box in konva, however, the baseline works differently in dom, and the text in dom also have extra space at top, which behaves the same as in node. It would be so glad to know more info about the problem and solutions. 🙌

[lavrton]

@aman-webdev what textBaseline is used in the native canvas demo? Konva is using top.

[aman-webdev]

middle

[aman-webdev]

this is with textBaseline as top

[lavrton]

I don't think I can do much to fix the differences between browser and node.js versions. It is just different rendering engines, and sometimes they are inconsistent.

Konva.Text uses top text baseline. You can try to experiment with custom shape and use different baselines, probably some of them will produce better result. If you do so, please share your results here.