Canvas image

[cold canopy]

Hi, I'm creating a welcome message, but when I change the X and Y of the image, it gets cut off, how can I center the image in that circle?

https://sourceb.in/bl83ivr5Vs

[dapper canyon]

• 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!

[main wren]

your circle center is currently on the top left (0, 0) of the image, you have to translate it to the center of where the avatar is

take the avatars width and height, divide it by 2 and add that to the x and y coordinates of the circle

[cold canopy]

I'm getting close to the result but it's still like that, if I divide the size, it disappears

as in the picture:

ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.arc(300, 199, 135, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();
    img = await loadImage(member.displayAvatarURL({ format: "png"}));
    ctx.drawImage(img, 90, 180, 200, 200);
    ctx.restore();

to divide by 2:

ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.arc(300, 199, 135, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();
    img = await loadImage(member.displayAvatarURL({ format: "png"}));
    ctx.drawImage(img, 90, 180, 200 / 2, 200 / 2);
    ctx.restore();