Jump to content


Canvas Font

  • Please log in to reply
7 replies to this topic

#1 Christian-W. Budde

Christian-W. Budde
  • Members
  • 334 posts
  • LocationGermany

Posted 10 July 2012 - 04:35 PM


ever wanted to use any vector font available with the HTML5 canvas? I've created an application that allows to use any converted font with the HTML5 Canvas. Experience this here:


(don't forget to hit enter to post changes)

With the text converted to a vector path, it's now possible to apply other effects, such as gradients for example...

#2 Jørn E. Angeltveit

Jørn E. Angeltveit
  • Administrators
  • 297 posts
  • LocationNorway

Posted 10 July 2012 - 04:50 PM

Wow. Very nice!

#3 Cipher Diaz

Cipher Diaz
  • Administrators
  • 313 posts

Posted 10 July 2012 - 05:21 PM

That is awsome!

#4 Christian-W. Budde

Christian-W. Budde
  • Members
  • 334 posts
  • LocationGermany

Posted 11 July 2012 - 12:31 AM

I just updated the example. It still needs a lot of work until it can be published, but there are so many possibilities with this.

#5 Christian-W. Budde

Christian-W. Budde
  • Members
  • 334 posts
  • LocationGermany

Posted 16 July 2012 - 11:11 PM

Another update: Now it's possible to load several different fonts. Unfortunately this does not work in every browser, which is why I have added a default - internal font.

Next I'm going to add some more funky styles for the funky fonts...

#6 BobLawrence

  • Members
  • 78 posts
  • LocationBeaver Bank Nova Scotia Canada

Posted 12 February 2016 - 07:50 AM



Object not found!

The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

If you think this is a server error, please contact the webmaster.

Error 404 www.savioursofsoul.de
Fri Feb 12 05:50:22 2016

#7 Christian-W. Budde

Christian-W. Budde
  • Members
  • 334 posts
  • LocationGermany

Posted 14 February 2016 - 07:54 PM

Please try: http://www.pcjv.de/SMS/CanvasFont.html


I have moved my private site to a dedicated domain.

#8 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 17 February 2016 - 01:48 AM

Not sure how Christian did this, I do like the effect


Looking around for something similar I came across 'opentype.js', available on github


On a form with a button and a w3paintbox the following (brute force) code reads in a font, calculates a path around the text and displays the result on the paintbox canvas in red with a black border :


procedure TForm1.W3Button1Click(Sender: TObject);
  opentype.load('./fonts/Roboto-Black.ttf', function(err, font) {
    if (err) {
         alert('Font could not be loaded: ' + err);
    } else {
        var ctx = document.getElementById('OBJ5').getContext('2d');
        // Construct a Path object containing the letter shapes of the given text.
        // The other parameters are x, y and fontSize.
        // Note that y is the position of the baseline.
        var path = font.getPath('Hello, World!', 0, 150, 72);
        path.fill = '#ff0000';  //red
        path.stroke = 'black';
        // If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).


Doesn't work in the ide as font is a file which needs to reside on a server 


Surprisingly it only worked in Edge with a generic error in Chrome and an even more cryptic message in Mozilla.

Digging around a bit the font-loading function in the library itself is coded as


function loadFromUrl(url, callback) {
    var request = new XMLHttpRequest();
    request.open('get', url, true);               //change to : 'post'


changing 'get' to 'post' resolves that issue.

Not sure why there is such a difference in behaviour between these 2 parameters.


A more elegant solution would be to access the libraries functions directly from pascal.

There is no typescript definition file available, but the template I've been using works here as well :


unit OpenTypeExt;
  JOpenType = class external
    Procedure Load(S:String; V: procedure); external 'load';
    Constructor   Create;
    Destructor    Destroy;
  OpenType external 'opentype' : JOpenType;
{$R 'opentype.js'}


with the calling program doing something like this where the callback is a procedure (WriteText)


procedure TForm1.W3Button1Click(Sender: TObject);
procedure TForm1.WriteText;


At least this demonstrates that the mechanism works.

Not sure though how to syntactically correctly set up this call back procedure with its parameters.

  • ielite likes this
Nico Wouterse

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users