better font support #53

Closed
tj opened this Issue Nov 16, 2010 · 14 comments

Projects

None yet

8 participants

@tj
Contributor
tj commented Nov 16, 2010

load from files

@jakeg
Contributor
jakeg commented Jun 11, 2011

+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
Contributor
tj commented Jun 11, 2011

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
Contributor
jakeg commented Jun 12, 2011

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
Contributor
tj commented Jun 12, 2011

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

@mikeys
mikeys commented Oct 6, 2012

Any progress with this feature? :)

@kangax
Collaborator
kangax commented Nov 18, 2012

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
Collaborator
kangax commented Nov 18, 2012

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
Collaborator
kangax commented Sep 10, 2013

This could be closed now

@tj tj closed this Sep 11, 2013
@tj
Contributor
tj commented Sep 11, 2013

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

@kangax
Collaborator
kangax commented Sep 11, 2013

@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
keverw commented Oct 28, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment