I am trying to add a rank card in my discord bot, and in order to do so I am trying to use canvas but when I use canvas everything works fine until I hit the .drawImage method. Where it gives me an error saying "TypeError: Image or Canvas expected". Although I've already required canvas globally, and everything else that has to do with canvas works properly aswell.

I've tried to require('canvas') inside the function but that doesn't fix the problem either.

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
const background = Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

When it sends the message it should attach the image with it, but right now its just giving me the following error.

Error:

C:\Users\Desktop\Discord\iBot\ibot.js:25
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        ^

TypeError: Image or Canvas expected

I am trying to add a rank card in my discord bot, and in order to do so I am trying to use canvas but when I use canvas everything works fine until I hit the .drawImage method. Where it gives me an error saying "TypeError: Image or Canvas expected". Although I've already required canvas globally, and everything else that has to do with canvas works properly aswell.

I've tried to require('canvas') inside the function but that doesn't fix the problem either.

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
const background = Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

When it sends the message it should attach the image with it, but right now its just giving me the following error.

Error:

C:\Users\Desktop\Discord\iBot\ibot.js:25
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        ^

TypeError: Image or Canvas expected

• javascript
• canvas
• discord.js

1 Answer 1

node-canvas' loadImage() method returns a Promise which get resolved to an <Image>.

You can't pass this Promise directly, you'll have to await for it:

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
// we need to await the Promise gets resolved since loading of Image is async
const background = await Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);