Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
55
rated 0 times [  61] [ 6]  / answers: 1 / hits: 14257  / 3 Years ago, sat, april 17, 2021, 12:00:00
client.on('guildMemberAdd', async (member) => {
const channel = member.guild.channels.cache.find(
(channel) => channel.name === 'general'
);

if (!channel) return;

const canvas = Canvas.createCanvas(700, 250);

const ctx = canvas.getContext('2d');

const background = await Canvas.loadImage('./wallpaper.jpg');
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

ctx.strokeStyle = '#ffffff';
ctx.strokeRect(0, 0, canvas.width, canvas.height);

// Select the font size and type from one of the natively available fonts
ctx.font = '60px ArialCE.ttf';
// Select the style that will be used to fill the text in
ctx.fillStyle = '#ffffff';
// Actually fill the text with a solid color
ctx.fillText(member.displayName, canvas.width / 2.5, canvas.height / 1.8);

ctx.beginPath();
// Start the arc to form a circle
ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
// Put the pen down
ctx.closePath();
// Clip off the region you drew on
ctx.clip();

const avatar = await Canvas.loadImage(
member.user.displayAvatarURL({ format: 'jpg' })
);
// Move the image downwards vertically and constrain its height to 200, so it's a square
ctx.drawImage(avatar, 25, 25, 200, 200);

const attachment = new Discord.MessageAttachment(
canvas.toBuffer(),
'welcome-image.png'
);

channel.send(`Welcome ${member.toString()} to the server!`, attachment);
});

I have been making a discord bot using discord.js. I wanted to make a canvas welcome message then when made it, it was working and all, except the words on the canvas. It was all like this:


screenshot


and I searched a lot on google but couldn't find any solution.
The error I get is (Fontconfig error: Cannot load default config file).
I know it means that there are no fonts in my system but how to add them. I'm using repl.it.


More From » node.js

 Answers
2

It should work in node-canvas 2.0+. checkout new Canvas.registerFont method:
https://github.com/Automattic/node-canvas/#registerfont


To use a font file that is not installed as a system font, use registerFont() to register the font with Canvas. This must be done before the Canvas is created.


const { registerFont, createCanvas } = require('canvas')
registerFont('./fontFolder/comicsans.ttf', { family: 'Comic Sans' })

const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')

ctx.font = '12px "Comic Sans"'
ctx.fillText('Everyone hates this font :(', 250, 10)

Example:


TTF file will have a different font name. so only 'Roboto' here. otherwise it doesn't work.


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

Don't define fontName as 'Medium 28px Roboto'. it won't work.


ctx.font = '12px Roboto Medium';

[#1466] Saturday, April 10, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jazminkyrap

Total Points: 631
Total Questions: 89
Total Answers: 109

Location: Finland
Member since Fri, Oct 21, 2022
2 Years ago
;