Incorrect text scaling

[dangreen]

const fs = require('fs');
const {
	createCanvas
} = require('canvas');

const text = "2020";
const canvas = createCanvas(500, 500);
const ctx = canvas.getContext('2d');

ctx.font = '36px Verdana';
ctx.fillStyle = 'red';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';

ctx.scale(1, 4);
ctx.fillText(text, 50, 50);

fs.writeFileSync('canvas-text-scale.png', canvas.toBuffer(undefined, 3, canvas.PNG_FILTER_NONE));

Output:

Expected:

macOS 10.15.3
node 11.15.0
canvas 2.6.1

[asturur]

the latest compiled version of node-canvas handles it fine ( apart the baseLine with scaling but that is another known issue)
I wonder if the pre-packaged version is working correctly.

this is the code i used in the test app:

tests['#1544 text scaling issue'] = function (ctx) {
  ctx.font = '24px Verdana';
  ctx.fillStyle = 'red';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.scale(1, 4);
  ctx.fillText('2020', 20, 20);
}

[blitzbohne]

@asturur So you think it was / is a node-canvas issue also when we apply a zoom or viewportTransform to fabric and it should be fine in latest node-canvas from master?

[blitzbohne]

@asturur but I can see fabric uses already 2.6.1? Because according to commits to node-canvas since 2.6.1 I could not find anything relevant that would fix this issue

[asturur]

i made this PR here to improve a bit the top position:
#1562

I work on a macbook.
if i install fabric with npm install, i get the precompiled node-canvas 2.6.1 and i see this problem here under node.
If i go in the downloaded node_modules/node-canvas and i compile the binary there, run the same code again, i get a good output.

Something is off, maybe the default binary does not use pango on mac? ( i m totally shooting i have no idea )

[asturur]

#1506 same issue

[blitzbohne]

@asturur Sorry for the dumb question but I've tried to then install node canvas from source via npm install canvas --build-from-source but I still get the same issue. Did I do anything wrong on this?

[blitzbohne]

I've now cleared node_modules/canvas/build*** and ran a node-gyp rebuild there. Everything was compiled fine but still running I see the same text issue resisting?

[asturur]

That is weird. I had a couple of difficulties recompiling because of NVM and a shadow copy of my modules being somewhere. Are you using NVM?

[blitzbohne]

@asturur No I am not using NVM. I also changed the rendering code in node-canvas, rebuild and it correctly rendered with my changes so its definitely the right thing.

I am currently investigating maybe I can figure something in the code.

[blitzbohne]

@asturur I can not find any relevant changes in node rendering context changed the past 2-3 years that may have effects on this. The only thing I can imagine is issues on either pango or cairo though I would say pango as it seems to generate a wrong path. Could you tell me versions of both pango and cairo you have @asturur maybe that will help?

I have:

$ pkg-config --modversion pango
1.44.7
$ pkg-config --modversion cairo
1.16.0

[asturur]

abogazzi@abogazzi-mbp $ pkg-config --modversion pango
1.42.4
abogazzi@abogazzi-mbp $ pkg-config --modversion cairo
1.14.12