measureText() is slightly off

[nugraizy]

Hi! I've been using canvas cairo backend / node-canvas created by Automattic. And I'm using packages for wraps big/long texts. When using node-canvas it works fine, everything align to the middle. But after using your canvas, it offset are off. And it might be because of value width on measureText() are different compared to node-canvas.

Here is the result when measuring text 'Hello World' :

node-canvas :

{
  width: 22,
  actualBoundingBoxLeft: 0,
  actualBoundingBoxRight: 22,
  actualBoundingBoxAscent: 8,
  actualBoundingBoxDescent: 0,
  emHeightAscent: 10,
  emHeightDescent: 3,
  alphabeticBaseline: 0.947265625
}

@napi-rs/canvas

{
  actualBoundingBoxAscent: 10,
  actualBoundingBoxDescent: 0,
  actualBoundingBoxLeft: 0,
  actualBoundingBoxRight: 24,
  fontBoundingBoxAscent: 8.056640625,
  fontBoundingBoxDescent: 6.62109375,
  width: 25
}

I'm using 512x512 canvas.

And here I'm using the package canvas-text-wrapper with the options below :

wrap(canvas, 'Hello World', {
	font: '82px chevin',
	textAlign: 'center',
	verticalAlign: 'middle',
	sizeToFill: true,
});

The font I used :
https://fontsgeek.com/fonts/Chevin-Bold

Results :
node-canvas : https://imgur.com/a/gjplLKV
@napi-rs/canvas : https://imgur.com/a/jZ0Rtgi

[salsawij]

same

[xbal023]

Same as me :(

[twlite]

Same as me :(

Just a suggestion, this issue is already noticed by the maintainer so let's not spam the inbox of the people who are watching this repository by commenting like this unless it is really necessary 😕

[Brooooooklyn]

@nugraizy this font https://fontsgeek.com/fonts/Chevin-Bold is Chevin not chevin

[nugraizy]

@nugraizy this font https://fontsgeek.com/fonts/Chevin-Bold is Chevin not chevin

done it. sadly doesn't fix the issue

[Brooooooklyn]

@nugraizy could you provide a minimal reproducible repo so I can debug it

[nugraizy]

@nugraizy could you provide a minimal reproducible repo so I can debug it

sure! here's the repo