<CanvasRenderingContext2D>.measureText() returns 0 for everything if no font is specified or if a family like "sans-serif" is specified.

[SteadEXE]

Hello, As mentioned in the title, if you do not specify any font face or you decide to use a font family like "serif" or "sans serif", measureText returns nothing.

It partially works in 0.1.37 but not in 0.1.40.

I discovered it because after upgrading from .37 to .40 most of my measureText in my app broke. I don't know if it normal or not, but there is a change of behavior between those versions.

Here is a snipped to reproduce the issue:

const { Canvas } = require('@napi-rs/canvas');

const canvas = new Canvas(1280, 720);
const ctx = canvas.getContext('2d');

const measure1 = ctx.measureText('This is a dummy text');

console.log('Measure 1');
console.table(measure1);

ctx.font = '20px serif';

const measure2 = ctx.measureText('This is a dummy text');

console.log('Measure 2');
console.table(measure2);

ctx.font = '20px Arial';

const measure3 = ctx.measureText('This is a dummy text');

console.log('Measure 3');
console.table(measure3);

It returns:

Measure 1
┌──────────────────────────┬────────┐
│         (index)          │ Values │
├──────────────────────────┼────────┤
│ actualBoundingBoxAscent  │   0    │
│ actualBoundingBoxDescent │   0    │
│  actualBoundingBoxLeft   │   0    │
│  actualBoundingBoxRight  │   0    │
│  fontBoundingBoxAscent   │   0    │
│  fontBoundingBoxDescent  │   0    │
│    alphabeticBaseline    │   0    │
│      emHeightAscent      │   0    │
│     emHeightDescent      │   0    │
│          width           │   0    │
└──────────────────────────┴────────┘
Measure 2
┌──────────────────────────┬────────┐
│         (index)          │ Values │
├──────────────────────────┼────────┤
│ actualBoundingBoxAscent  │   0    │
│ actualBoundingBoxDescent │   0    │
│  actualBoundingBoxLeft   │   0    │
│  actualBoundingBoxRight  │   0    │
│  fontBoundingBoxAscent   │   0    │
│  fontBoundingBoxDescent  │   0    │
│    alphabeticBaseline    │   0    │
│      emHeightAscent      │   0    │
│     emHeightDescent      │   0    │
│          width           │   0    │
└──────────────────────────┴────────┘
Measure 3
┌──────────────────────────┬───────────────────┐
│         (index)          │      Values       │
├──────────────────────────┼───────────────────┤
│ actualBoundingBoxAscent  │        15         │
│ actualBoundingBoxDescent │         4         │
│  actualBoundingBoxLeft   │         0         │
│  actualBoundingBoxRight  │   183.822265625   │
│  fontBoundingBoxAscent   │    18.10546875    │
│  fontBoundingBoxDescent  │    4.23828125     │
│    alphabeticBaseline    │    18.10546875    │
│      emHeightAscent      │    18.10546875    │
│     emHeightDescent      │    4.23828125     │
│          width           │ 183.3800048828125 │
└──────────────────────────┴───────────────────┘

Feel free to ask me questions if needed.

[Brooooooklyn]

@SteadEXE have you registered fonts before measureText?

[SteadEXE]

Hello, thank you for the reply.

What do you mean by registering font, are you talking about using ctx.font = 'MyFont' before ? In that case I did, but with "sans-serif" not with a specific font name.

After digging, it looks like you were referring to GlobalFonts.register

I did not used this in my code, so I don't know why I got a different behavior between .37 and .40. This is really weird.

[SteadEXE]

I fixed the issue by registering fonts and then by using those fonts.