Distorted text rendering

[matthias-w]

The position and style of some characters in a text rendered on canvas are distorted. This is similar to the issue #548 I also experienced on my system. But this got fixed and did not occur anymore after node canvas version 1.2.3, i.e. this has definitely worked on my machine before (also with the given True-Type font 'Marker SD' used in the example). However, the issue described here appeared when I upgraded to node canvas 1.3.x and still appears in version 1.4.0.

Steps to Reproduce

var Canvas = require('canvas');
var canvas = new Canvas(200, 200);
var ctx = canvas.getContext('2d');
ctx.font = "12px 'Marker SD'";
ctx.textBaseline = "top";
ctx.fillText("Evaluating Scrum", 10, 10);

Resulting text:

Environment

• Version of node-canvas: 1.4.0
• Environment : node 4.4.7 on Ubuntu 14.04.4 LTS

[chearon]

Are you using Pango? Is that using a custom font or one already installed on the OS? I think it's most likely not caused by node-canvas itself but rather Pango or Cairo. The only way to know is to create a test program in C.

You could try updating Cairo since I believe the Ubuntu packages put pangocairo in Cairo, so if that is a version behind or ahead of Pango there might be issues

[matthias-w]

Hi chearon,
This is not a custom font, I installed the font on the OS before. I am not sure whether using Pango. I used the package installation command provided in node-canvas' installation section:

sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++

I already have the most recent version installed on my machine. Maybe Ubuntu's default libcairo repo contains an older version. Do you know an alternative repository?

Many thanks

[chearon]

It looks like it's some kind of kerning bug. It works for me in my Ubuntu:

Try running this to see what version the header file is, mine is 1.36.8

$ cat /usr/include/pango-1.0/pango/pango-features.h | grep VERSION_STRING
#define PANGO_VERSION_STRING "1.36.8"

If doing a full apt-get update and apt-get upgrade doesn't do it (and that would upgrade everything since you're LTS) try downloading the font again or something? It looks like a kerning value is wrong

[matthias-w]

Hello chearon,
thanks for your help. My version is 1.36.3 which is, according to http://packages.ubuntu.com/trusty/libpango-1.0-0 the newest version for Ubuntu 14.04 LTS. There is no change doing the usual apt-get update && apt-get upgrade. Are you sure you are using 14.04 too?

I could also test on an older system with Ubuntu 12.04.5LTS with Pango version 1.30.0 and node-canvas 1.4.0. On this machine it works just normal resulting in the correct text rendering you provided. It seems this could be indeed an issue with Pango version.

[chearon]

Oh, I'm not using 14.04, I assumed an LTS version would have latest Pango and Cairo. Try getting them from another source or compiling them, they aren't that hard to compile. I would still try redownloading the font because, while highly unlikely, one of the kerning value bytes in the font could have been flipped from something else touching the file

[matthias-w]

Forgot to mention that I have already tried a new font file, but with no effect. I'll see if I can upgrade my system to Ubuntu 16.04 LTS. Its current libpango version is 1.38.1. I have to upgrade sooner or later either way. Hopefully that will fix the issue. Thanks again for your help.

[matthias-w]

I've set up a test system with Ubuntu 16.04 LTS running libpango1.0-dev version 1.38.1 and node-canvas 1.4.0 and using the same font file (equal checksum). On this new test system it looks fine. So it really seems to be an issue regarding the used lib versions.

[chearon]

OK, thanks for reporting back