Invalid text render

[bazilio91]

var canvas = new Canvas(600, 600),
  ctx = canvas.getContext('2d');

  ctx.font = '30px Impact';
  ctx.fillText("12", 100, 300);

var stream = canvas.pngStream();

Output of pngStream:

System info:

• canvas: 1.2.1
• pixman: stable 0.32.6 (bottled)
• cairo: stable 1.14.2 (bottled)
  ==> Dependencies
  Build: xz ✔, pkg-config ✔
  Required: freetype ✔, fontconfig ✔, libpng ✔, pixman ✔, glib ✔
  ==> Options
  --universal
  Build a universal binary
  --without-x11
  Build without x11 support
• fontconfig: stable 2.11.1 (bottled)
• freetype: stable 2.5.5 (bottled)
• glib: stable 2.44.0 (bottled)
• uname: Darwin 14.1.0 Darwin Kernel Version 14.1.0: Thu Feb 26 19:26:47 PST 2015; root:xnu-2782.10.73~1/RELEASE_X86_64 x86_64
• node -v: v0.10.38, v0.12.2

[ssured]

I'm having the same problem, no solution found...

[wavded]

I have the same problem.... same code ran against Ubuntu 14.04 cairo setup is fine but Mac is hosed.

[jacquie]

I too have this problem.
canvas: 1.2.2
cairo: 1.14.2
libpng: stable 1.6.17 (bottled)
fontconfig: stable 2.11.1 (bottled)
pixman: stable 0.32.6 (bottled)
freetype: stable 2.5.5 (bottled)
... as above
and without pango.

With pango my custom font wouldn't render.

Interestingly enough my custom font renders the expected size whereas Arial did as above - enormous and all characters of top of each other. In this screen shot the dashes on the grid are from my custom font size 18px and the numbers down the sides are supposed to be 10px Arial.

I believe this started happening somewhere after node-canvas v1.1.6.
We have the latest versions of all the dependencies but maybe that is not what we need?
If not please advise on a set of compatible versions.

[matthias-w]

Same problem here, letters are overlapping (looks like a wrong kerning)
canvas 1.2.0 (up to 1.2.3)
node 0.12.4
Ubuntu 14.04.2
No problems with canvas version 1.1.6

[kepeterson]

I'm having the same problem -- going back to canvas version 1.1.6 didn't fix it either. Anyone having any luck?

OS X
node 0.12.2 / io.js 2.3.0
canvas >= 1.1.6

[RWizard]

Please, try it:
var canvas = fabric.createCanvasForNode(..., ...)
font = new canvas.Font('ACLine', __dirname + 'ACLineRegular.ttf');
font.addFace(__dirname + 'ACLineRegular.ttf', 'normal');

canvas.contextTop.addFont(font);

[kepeterson]

Using fabric.js as mentioned above I still have weird behavior:

generated by:

var fs = require('fs'),
    fabric = require('fabric').fabric,
    out = fs.createWriteStream(__dirname + '/helloworld.png');

var canvas = fabric.createCanvasForNode(200, 200);
var text = new fabric.Text('Hello world', {
  left: 100,
  top: 100,
  fill: '#f55',
  angle: 15
});
canvas.add(text);

var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
  out.write(chunk);
});

[RWizard]

I use Mac and fabric. Problem with fonts solving as add fonts definition in code. On linux all ok, but fabric on Mac require definition font.
canvas.contextTop.addFont(font);

[LinusU]

I have this problem as well when installed without pango. The following workaround works for me:

var font = new Canvas.Font('OpenSans', __dirname + '/../OpenSans.ttf')
font.addFace(__dirname + '/../OpenSans.ttf', 'normal')

ctx.addFont(font)
ctx.font = '12px OpenSans'

[sebastian-schmitt]

Same problem here (Mac OS X 10.10.5). After removing pango (homebrew), reinstalling cairo (homebrew) and reinstalling canvas (npm), everything worked fine again. The "custom-font-workaround" didn't work for me.

[tpisto]

Thank you for this advice! Had exactly the same problems: After removing pango (homebrew), reinstalling cairo (homebrew) and reinstalling canvas (npm), everything worked fine again.

[LinusU]

Should probably be fixed by #628, should we choose to merge that...

[jimmywarting]

Same problem here on mac