Canvas

[shrewd grail]

const applyText = (canvas, text) => {
                const context = canvas.getContext('2d');
                let fontSize = 70;
            
                do {
                    context.font = `${fontSize -= 10}px sans-serif`;
                } while (context.measureText(text).width > canvas.width - 300);
            
                return context.font;
            };

            const canvas = createCanvas(1024, 500);
            const context = canvas.getContext('2d');

            const background = await readFile('./wallpaper.jpg');
            const backgroundImage = new Image();
            backgroundImage.src = background;
            context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

            context.beginPath();
            context.arc(512, 175, 125, 0, Math.PI * 2, true);
            context.shadowBlur = 20;
            context.shadowColor = 'black';
            context.fillStyle = '#ffffff';
            context.fill();
            context.lineWidth = 10;
            context.strokeStyle = "#ffffff";
            context.stroke();
            context.closePath();
            context.clip();

            const { body } = await request(interaction.member.displayAvatarURL({ format: 'jpg' }));
            const avatar = new Image();
            avatar.src = Buffer.from(await body.arrayBuffer());
            context.drawImage(avatar, 512 - 125, 50, 250, 250);

            context.font = '28px sans-serif';
            context.fillStyle = '#ffffff';
            context.fillText("BIENVENUE", 0, 0);

            context.font = applyText(canvas, `${interaction.member.displayName}!`);
            context.fillStyle = '#ffffff';
            context.fillText(`${interaction.member.displayName.toUpperCase()}!`, canvas.width / 2.5, canvas.height / 1.8);

            const attachment = new AttachmentBuilder(canvas.toBuffer('image/png'), { name: 'profile-image.png' });

            welcomeChannel.send({ files: [attachment] });```

Hello, I try to make a canva (for welcome card), there are the image, background.. But not the text. Somone can help me please ?

[glossy urchin]

Hey, use Arial instead of sans-serif, and it should work, and if you want to change font, you could register a custom font

[shrewd grail]

Hello ! Thank you so much !

[glossy urchin]

[shrewd grail]

Tu sais comment on ajoute une police personnalisée s'il te plaît ?

registerFont ça me dit que c'est pas une fonction

[glossy urchin]

Yep,

const { GlobalFonts } = require("@napi-rs/canvas");
const { readFileSync } = require("fs");
const { join } = require("path");
const fontPath = join("le chemin d'acces vers la police");
const fontData = readFileSync(fontPath);
const registerFonts = async () => {
await GlobalFonts.register(fontData);
await GlobalFonts.registerFromPath(fontPath, "le nom que tu veux donner à la police");
};
await Promise.all([registerFonts()]);

c'est ce qui marche pour moi

[shrewd grail]

Merci, bien vu

[shrewd grail]

const fontPath = join("./Roboto-Black.ttf");
const fontData = await readFile(fontPath);
await GlobalFonts.register(fontData);
await GlobalFonts.registerFromPath(fontPath, "Roboto");```

Je l'ai raccourci si tu le souhaites

[glossy urchin]

merci ahah

[shrewd grail]

Merci à toi