better font support

[tj]

load from files

[jakeg]

+1

Would be great to be able to load fonts from somewhere other than the OS' font directories.

In the meantime, to help others, this works:

• put font .ttf files in e.g. ~/fonts
• ctx.font = '9pt "Palatino Linotype"'; // note the quotes

[tj]

we also dont have font family fallback support, not sure if i have an issue open for that. cairo attempts to abstract the font handling to the point where it's not very usable so we might require our own abstraction layer

[jakeg]

yup you do, #38 . Font-family support isn't such a biggie afaic as on the server you should know in advance what fonts you have, whilst obviously on the client you don't know what fonts the client has.

[tj]

it would be nice to implement as far as keeping the api the same goes, but yeah not a huge deal really

[mikeys]

Any progress with this feature? :)

[kangax]

Would love to have this as well.

Things are pretty bad right now... Here's an attempt to render italic Helvetica on Mac OS X 10.7.5 (node-canvas@0.13.1, node@0.8.14):

var fs = require('fs'),
    Canvas = require('canvas'),
    canvas = new Canvas(200,200),
    ctx = canvas.getContext('2d');

ctx.font = 'italic 30px Helvetica';
ctx.fillText("Awesome!", 0, 25);

ctx.font = 'italic 400 30px Helvetica';
ctx.fillText("Awesome!", 0, 75);

ctx.font = 'bold 30px Helvetica';
ctx.fillText("Awesome!", 0, 125);

ctx.font = 'italic bold 30px Helvetica';
ctx.fillText("Awesome!", 0, 175);

var out = fs.createWriteStream(__dirname + '/text.png'),
    stream = canvas.createPNGStream();

stream.on('data', function(chunk){
  out.write(chunk);
});

[kangax]

Sometimes it glitches to such extent that text all of a sudden becomes tiny:

(using this code)

var fs = require('fs'),
    Canvas = require('canvas'),
    canvas = new Canvas(200,200),
    ctx = canvas.getContext('2d');

ctx.font = 'italic 30px Helvetica';
ctx.fillText("Awesome!", 0, 25);

var out = fs.createWriteStream(__dirname + '/text.png'),
    stream = canvas.createPNGStream();

stream.on('data', function(chunk){
  out.write(chunk);
});

[kangax]

This could be closed now

[tj]

ps if anyone wants to help maintain node-canvas ;) haha

[kangax]

@visionmedia :( anyone else working on node-canvas besides you?

[eric-brechemier]

opentype.js looks like an interesting alternative to load native fonts:

opentype.js is a JavaScript parser for TrueType and OpenType fonts.

It gives you access to the letterforms of text from the browser or node.js.

Demo:
http://nodebox.github.io/opentype.js/

[shaminpola]

i am not able to change font on canvas

ctx.font = '25px Optima';

i installed Optima on my ubuntu. is there anything i can do to fix this issue?

[keverw]

Was the issue where bold would end up being tiny ever fixed? For some reason if I add context.font = 'Bold 375px Monaco'; it's tiny but context.font = '375px Monaco'; it's big but not bolded...

edit: Just noticed if I make bold lowercase, the text doesn't render tiny but not bold either... Interesting...

[beclamide]

@eric-brechemier nice find! I've just used that on my app and it's working perfectly. Thanks.