Jump to content

Canvas Font

Recommended Posts



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...

Share this post

Link to post
Share on other sites

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...

Share this post

Link to post
Share on other sites



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

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now