Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

better font support #53

Closed
tj opened this Issue · 12 comments

6 participants

@tj
tj commented

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
tj commented

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
tj commented

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
Collaborator

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

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

This could be closed now

@tj tj closed this
@tj
tj commented

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

@kangax
Collaborator

@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/

@zuzusik zuzusik referenced this issue from a commit
@zuzusik zuzusik Extand graphical lib
On my machine with Ubuntu 12.04 after installing libjpeg via 'sudo apt-get install libjpeg8-dev'when I run 'ldconfig -p | grep libjpeg' I see

libjpeg.so.8 (libc6,x86-64) => /usr/lib/x86_64-linux-gnu/libjpeg.so.8
libjpeg.so.8 (libc6) => /usr/lib/i386-linux-gnu/libjpeg.so.8

So the provided regexp of detecting if libjpeg is installed doesn't work for me.

uname -a on my machine is
Linux zozulyak-v 3.5.0-32-generic #53~precise1-Ubuntu SMP Wed May 29 20:33:37 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux

libjpeg8-dev version is 8c-2ubuntu7

Note: my colleagues have similar issues on CentOs
1125be7
@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.