Canvas not sending welcome image


#1
const applyText = (canvas, text) => {
    const ctx = canvas.getContext('2d');


    let fontSize = 70;

    do {
        ctx.font = `${fontSize -= 10}px sans-serif`;
    } while (ctx.measureText(text).width > canvas.width - 300);

    return ctx.font;
};


client.on('guildMemberAdd', async member => {
    const channel = member.guild.channels.find(ch => ch.name === 'on-topic');
    if (!channel) return;

    const canvas = Canvas.createCanvas(700, 250);
    const ctx = canvas.getContext('2d');

    const {
        body: buf
    } = await snekfetch.get('https://cdn.glitch.com/294c4c9f-8e20-4506-a23f-71a77d13c629%2Fimage.png?1541609757084');
    const background = await Canvas.loadImage(buffer);
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

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

    // Slightly smaller text placed above the member's display name
    ctx.font = '28px sans-serif';
    ctx.fillStyle = '#ffffff';
    ctx.fillText('Welcome to the server,', canvas.width / 2.5, canvas.height / 3.5);

    // Add an exclamation point here and below
    ctx.font = applyText(canvas, `${member.displayName}!`);
    ctx.fillStyle = '#ffffff';
    ctx.fillText(`${member.displayName}!`, canvas.width / 2.5, canvas.height / 1.8);

    ctx.beginPath();
    ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();

    const {
        body: buffer
    } = await snekfetch.get(member.user.displayAvatarURL);
    const avatar = await Canvas.loadImage(buffer);
    ctx.drawImage(avatar, 25, 25, 200, 200);

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

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

I am receiving no errors but the image is not sending. I have the correct packages installed. If you would like more information, Just leave a comment and I’ll be happy to add more! If anyone is willing to help it’d be greatly appreciated!

Thanks! :slight_smile:


MOD EDIT: code formatting


#2

Hi @Scott-elsy, welcome to Glitch (belatedly)!

Out of curiosity, do you receive the rest of the message and just not the image? Before you create the attachment with Discord.Attachment() what does the canvas variable look like (as we touched on in your other thread you can try to console.log() either of those to see what they contain)?

These steps might help point out where the code you’re using is going off the rails.


#3

Im not familiar with snekfetch, but canvas at least needs the image to be local. Have you tried using an image on the local filesystem rather than using the CDN url? You can use wget and the CDN url from the console to import an image locally.