Search code examples
node.jsfabricjs

Gebbrich letters when using fabricjs with nodejs

i'm trying to use fabric in my nodejs backend which is deployed in an alpine image ( node version 8.15 ) so i've made a function responsible for creating the template as the following

const creatCardTemplate = function(user){
    let canvas = new fabric.Canvas(null, {width: 650, height: 400});
    canvas.backgroundColor="#fff";
    let company=user.company?user.company.companyName:"YOUR COMPANY";
    let text = new fabric.IText(company,{fontSize:30,top:100,textAlign:'center',fontWeight:'bold'});
    canvas.add(text);
    canvas.centerObjectH(text);

    text = new fabric.IText(user.first_name+" "+user.last_name,{fontSize:26,top:140,textAlign:'center',fontWeight:'bold'});
    canvas.add(text);
    canvas.centerObjectH(text);

    :::: etc
        
    canvas.renderAll(); 
    return canvas;
}

a quite normal code and then i just generate a PNG image from it

let canvas = creatCardTemplate(user);
let image = canvas.toDataURL({ format: 'png'});

that's all,it works fine in my local machine but my problem is that when i deploy it the png result is so gebbrich like this

enter image description here

i tried many solutions like changing the creation method ( i tried to create the canvas by loading a json data ) also i tried to change the font family to Arial but always the same damn squares

Solution

  • After a lot of struggling i found the issue, the issue was that alpine image came without any font installed ( as we know that Fabric will use the browser fonts if it was installed in a front end framework) but in my case it was installed with nodejs (backend) so it will use the fonts available in the system.

    So i've installed some fonts and added them to be used by Fabric as the following: first of all we need to import

    const { registerFont, createCanvas } = require('canvas')

    then we add our desired font

    registerFont('helpers/fonts/Roboto-Regular.ttf', { family: 'Roboto' })

    then we have just to use it :)

     let text = new fabric.IText("hello",{fontSize:30,top:100,textAlign:'center',fontFamily:'Roboto