I don't know how to move the avatarimage discordJS

, ,
1

First, sorry for my english, is not my mother language, and iknow is ugly my english…

so, basically Idk, how can I move the avatarimage?
all the time he stay in the corner!

    client.on('guildMemberAdd', async member => {
    const channel = client.channels.get('715122675395330049');
	if (!channel) return;

	const canvas = Canvas.createCanvas(939,480);
	const ctx = canvas.getContext('2d');

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

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

    const avatar = await Canvas.loadImage(member.user.displayAvatarURL);
    ctx.lineTo(avatar, 50, 102)
    ctx.drawImage(avatar, 25, 25, 200, 200);
    
	const attachment = new Discord.Attachment(canvas.toBuffer());

	channel.send( attachment);
});

client.on('message', async message => {
	if (message.content === '!join') {
		client.emit('guildMemberAdd', message.member || await message.guild.fetchMember(message.author));
	}
});

image
image936×477 104 KB

2

Change this line to ctx.lineTo(avatar, x, y). I think it’s relative to the top-left corner.

3

i tried change to ctx.lineTo(avatar, x, y) but the console give that:

(node:8068) UnhandledPromiseRejectionWarning: ReferenceError: x is not defined

do I create a variable x and y?
but what?

4

Just switch where I put x,y with your own numbers like 250,250.
If you want to use variables you can do let x = 250 and let y = 250

5

the same, the image stay in the corner.

client.on('guildMemberAdd', async member => {

    const channel = client.channels.get('715122675395330049');

    if (!channel) return;

    const canvas = Canvas.createCanvas(939,480);

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

     const background = await Canvas.loadImage('./wallpaper.jpg');

     ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

    ctx.beginPath();

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

    ctx.closePath();

    ctx.clip();

    const avatar = await Canvas.loadImage(member.user.displayAvatarURL);

    let x = 50;

    let y = 50;

    ctx.lineTo(avatar, x, y)

    ctx.drawImage(avatar, 25, 25, 200, 200);

    

    const attachment = new Discord.Attachment(canvas.toBuffer());

    channel.send( attachment);

});

if I look arrogant, I’m sorry, it’s because I don’t know how well English works, like, how to speak with respect, among other things.

6 
                        ^   ^

This is the location of your top-left corner of the picture

                                ^     ^

These control the bottom right corner of your image.
Oh sorry got the function wrong the above solution changes the top right corner

7

i tried to modify the values but thats happens hahahaha.
ctx.drawImage(avatar, 40, 40, 150, 150);

image
image939×471 99.9 KB

8

please, help-me, i want put the image in the circle, but I can’t, i’m new with development

9

Ok I made another mistake sorry, the third and fourth parameters are width and height properties respectivley
10

look at this
i removed this

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

and modified this
ctx.drawImage(avatar, 80, 85, 310, 310);
and look like this now, but is not a circle :frowning_face:

image
image928×463 115 KB

i’ll see the drawImage()

12

Change this to
ctx.arc(235, 240, 155, 0, Math.PI * 2, true);
The first two parameters are the center of the circle and the third is the radius, that’s what I inferred from your code

1 Like
13

omg, you is a god!!! <3 thank so much for the help!!! omg!!

14

is looking like this!! <3

image
image932×470 113 KB

just change the radius value? (yes i tried and the aswer is yes hahaha)

1 Like