javascriptcanvasdiscord.jsnode-canvas

Characters are not displayed in Canvas

When I try to display text on a picture using Canvas, some characters and emoji are displayed incorrectly on Windows and Ubuntu. 1 screen - on Windows, 2 screen - on Ubuntu. With any font, this is the situation. Canvas that on Windows, that on Ubuntu I just installed via npm install canvas.

Windows

Ubuntu

Code:

const canvas = Canvas.createCanvas(1000,333)
const ctx = canvas.getContext('2d');
        
const background = await Canvas.loadImage('https://i.imgur.com/YzwG7yk.jpeg')
ctx.drawImage(background, 0, 0, canvas.width, canvas.height)
ctx.font = '300 30px "Arial"'
ctx.fillStyle = '#ffffff'
ctx.fillText(`πŸ’—πŸ’—πŸ’—\nγƒžγƒΌγ‚―γ¨γƒ‹γƒƒγ‚―\nP𝔦𝔯𝔬z𝔬k`, 70, 70)
const attachment = new Discord.MessageAttachment(canvas.toBuffer(), 'xp.png');
return message.channel.send(attachment)
Solution

  • You need to have a font able to render these glyphs installed on your server.
    If you can't control the fonts on your server, you can load a webfont using registerFont

    Live example.