discord.js - Imagine an app•10mo ago

HELP

In the following code, the bot sends the canvas banner to the user in dm, but I want them to see the text under the user's logo in the middle, and it doesn't work for me 😦

2 Replies

d.js toolkit•10mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button!

Sedi•10mo ago

const { createCanvas, loadImage, registerFont } = require('canvas');
const { MessageAttachment } = require('discord.js');

client.on('guildMemberAdd', async (member) => {
  const canvas = createCanvas(1024, 500);
  const ctx = canvas.getContext('2d');
  const bannerPath = 'https://media.discordapp.net/attachments/1077242624932593785/1138422426670203000/file.png?width=969&height=473'; // background URL here
  const banner = await loadImage(bannerPath);
  ctx.drawImage(banner, 0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#FFFFFF';
  const titleFont = '48px Arial';
  const footerFont = '20px Arial';

  // Register custom font if needed
  // registerFont('path/to/font.ttf', { family: 'FontName' });

  const circleX = canvas.width / 2;
  const circleY = 240;
  const circleRadius = 120;
  const avatarX = circleX - circleRadius;
  const avatarY = circleY - circleRadius;

  ctx.beginPath();
  ctx.arc(circleX, circleY, circleRadius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.lineWidth = 10;
  ctx.strokeStyle = 'white';
  ctx.stroke();
  ctx.clip();

  const avatarURL = `https://cdn.discordapp.com/avatars/${member.id}/${member.user.avatar}.png`;
  const avatar = await loadImage(avatarURL).catch(() => {
    return loadImage(member.user.defaultAvatarURL);
  });
  ctx.drawImage(avatar, avatarX, avatarY, circleRadius * 2, circleRadius * 2);

  ctx.fillStyle = '#000000'; // Set text background color to black
  ctx.fillRect(0, circleY + circleRadius + 20, canvas.width, 80); // Draw black background

  ctx.fillStyle = '#FFFFFF';
  ctx.font = titleFont;
  ctx.textAlign = 'end'; // Center the text
  ctx.fillText(`${member.user.username}`, 400, 265);

  const attachment = new MessageAttachment(canvas.toBuffer(), 'welcome.png');
  member.send({ files: [attachment] }).catch(console.error);
});

const { createCanvas, loadImage, registerFont } = require('canvas');
const { MessageAttachment } = require('discord.js');

client.on('guildMemberAdd', async (member) => {
  const canvas = createCanvas(1024, 500);
  const ctx = canvas.getContext('2d');
  const bannerPath = 'https://media.discordapp.net/attachments/1077242624932593785/1138422426670203000/file.png?width=969&height=473'; // background URL here
  const banner = await loadImage(bannerPath);
  ctx.drawImage(banner, 0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#FFFFFF';
  const titleFont = '48px Arial';
  const footerFont = '20px Arial';

  // Register custom font if needed
  // registerFont('path/to/font.ttf', { family: 'FontName' });

  const circleX = canvas.width / 2;
  const circleY = 240;
  const circleRadius = 120;
  const avatarX = circleX - circleRadius;
  const avatarY = circleY - circleRadius;

  ctx.beginPath();
  ctx.arc(circleX, circleY, circleRadius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.lineWidth = 10;
  ctx.strokeStyle = 'white';
  ctx.stroke();
  ctx.clip();

  const avatarURL = `https://cdn.discordapp.com/avatars/${member.id}/${member.user.avatar}.png`;
  const avatar = await loadImage(avatarURL).catch(() => {
    return loadImage(member.user.defaultAvatarURL);
  });
  ctx.drawImage(avatar, avatarX, avatarY, circleRadius * 2, circleRadius * 2);

  ctx.fillStyle = '#000000'; // Set text background color to black
  ctx.fillRect(0, circleY + circleRadius + 20, canvas.width, 80); // Draw black background

  ctx.fillStyle = '#FFFFFF';
  ctx.font = titleFont;
  ctx.textAlign = 'end'; // Center the text
  ctx.fillText(`${member.user.username}`, 400, 265);

  const attachment = new MessageAttachment(canvas.toBuffer(), 'welcome.png');
  member.send({ files: [attachment] }).catch(console.error);
});

Gaming

Programming

HELP