Context2D.scale not playing nice with font rendering

[jhuckaby]

When using Context2D.fillText() combined with Context2D.scale(), the text rendering results in node-canvas are not accurate. The text just isn't scaling properly. It seems to be quantized to various different widths, and can't scale between them. Here is what I am seeing:

Even though I am incrementally changing the scale for each line of text (see source code below), the text stays exactly the same size for several lines in a row, then it suddenly "jumps" down to a lower scale.

Here is what I expect it to look like (this image is rendered with almost identical code, but inside Google Chrome instead of node-canvas):

As you can see, in Chrome with a "real" HTML5 Canvas object can scale the text with perfect accuracy. Here is a link to the Chrome version (Note: You may have to refresh a couple times for it to load and cache the font).

http://bowser.effectgames.com/bugs/canvas-text-scale.html

Source code for the node-canvas version:

var fs = require('fs');
var Canvas = require('canvas')
  , Image = Canvas.Image
  , Font = Canvas.Font;

var text = "Now is the time for all good men to come to the aid of their country.";

var canvas = new Canvas(300, 480)
  , context = canvas.getContext('2d');

var font = new Font('opensans', "open-sans-v14-latin-regular.ttf");
context.addFont( font);
context.font = '14pt opensans';
context.fillStyle = 'black';
context.textAlign = 'left';
context.textBaseline = 'top';

var y = 0;
var scale = 0.5;

for (var idx = 0; idx < 30; idx++) {
	context.save();
	context.scale( scale, scale );
	context.fillText( text, 0, y );
	y += 20 / scale;
	scale -= 0.01;
	context.restore();
}

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

Here is a link to the Open Sans (Google Fonts) I am using:

http://bowser.effectgames.com/bugs/open-sans-v14-latin-regular.ttf

I have reproduced this issue with over 20 different fonts, both TrueType and OpenType, on the following two systems:

macOS Sierra 10.12.6
node 6.9.1
node-canvas 1.6.5
cairo 1.14.10

AWS EC2 Linux
Linux 4.9.32-15.41.amzn1.x86_64
node 6.11.1
node-canvas 1.6.5
cairo-1.12.14-6.8

[LinusU]

Interesting, it seems like we are incorrectly rounding somewhere 🤔

[chearon]

Huh, I'm surprised this has never come up before... I was able to reproduce your issue with 1.6.5 and the non-Pango build. (1.6.5 can either be built with or without Pango). If you install Pango and then re-do npm install canvas the issue will go away.

You can also use the 2.0.0-alpha.2 version, which gets rid of Cairo font rendering entirely (but also needs Pango).

[jhuckaby]

Oh good grief, it was Pango!!! I am so sorry for wasting your time, @LinusU and @chearon. I thought Pango was totally optional, and only needed for international glyphs. Thank you @chearon for the information. We can totally close this issue now.

[chearon]

Not at all! You did stumble on a real issue affecting 1.x, but using Pango might be a good enough fix.