Home/ Questions/Q 8802955
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T01:12:52+00:00

I’m having some problems creating text using Raphael.js ‘s print method. To be more

  • 0

I’m having some problems creating text using Raphael.js‘s print method. To be more precise, the getFont method that the print method requires, returns an undefined value. I put together a very simple fiddle here to try to find the source of the problem, but with no luck so far. The same fiddle code is bellow:

<div id="canvas" style="width:500px; height:300px; outline: 1px solid #000;"></div>​

And the JavaScript:

var canvas, font, text;

canvas = new Raphael(document.getElementById("canvas", 500, 300));
font = canvas.getFont("Arial");
text = canvas.print(0, 0, "Some text", font, 24).attr({ "fill": "#C00" });​

The canvas is created, even the path is drawn (despite the fact the the value of font is undefined), but the font object is returned undefined. And I’ve tried with “Arial” font too. After all, these two are standard, so we’re not talking about custom fonts.

Any ideas why this happens?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Raphael’s print method requires you to use Cufon-font-files. From the docs on getFont:

    Finds font object in the registered fonts by given parameters.

    and reading further at registerFont:

    Adds given font to the registered set of fonts for Raphaël. Should be
    used as an internal call from within Cufón’s font file.

    A little twisted…..

    So if you want/need to use the print method you’ll have to convert and supply the font files in the correct format, read about cufon here.

    If you want to use system fonts (or webfonts) you can use the Paper.text() method that is pretty easy to use and you can style your text with CSS and the likes.

    • 0