Invalid text render

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

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

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

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.

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

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

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);

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);
});

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);

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'

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.

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.

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

Same problem here on mac

Navigation Menu

Repository navigation

Invalid text render #548

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Invalid text render #548

Description

Activity

ssured commented on Apr 24, 2015

wavded commented on Apr 24, 2015

jacquie commented on May 1, 2015

matthias-w commented on May 27, 2015

kepeterson commented on Jun 19, 2015

RWizard commented on Jun 19, 2015

kepeterson commented on Jun 22, 2015

RWizard commented on Jun 22, 2015

LinusU commented on Jul 2, 2015

sebastian-schmitt commented on Sep 8, 2015

tpisto commented on Nov 25, 2015

LinusU commented on Nov 26, 2015

jimmywarting commented on Dec 15, 2015

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions