From 05b6244b64d4c3e009ff727fc99c10176e1b230d Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 21 Jul 2025 17:15:27 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20avatar=E3=81=AE=E7=B8=A6=E6=A8=AA?=
 =?UTF-8?q?=E6=AF=94=E3=81=8C1:1=E3=81=A7=E3=81=AF=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E5=A0=B4=E5=90=88=E3=81=AB=E7=94=BB=E5=83=8F=E3=81=8C=E3=82=86?=
 =?UTF-8?q?=E3=81=8C=E3=82=80=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkMediaAudio.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 04b24bb38d..ee5a19a62e 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -412,11 +412,15 @@ function drawVisualizer() {
 
 	// 波形の中心にアバターを円形にくりぬいて描画
 	const avatarSize = radius;
+	const avatarHeight = Math.max(userAvatarImage.value.height * (avatarSize / userAvatarImage.value.width), avatarSize);
+	const avatarWidth = Math.max(userAvatarImage.value.width * (avatarSize / userAvatarImage.value.height), avatarSize);
+	const avatarDx = centerX - avatarWidth / 2;
+	const avatarDy = centerY - avatarHeight / 2;
 	canvasCtx.value.save();
 	canvasCtx.value.beginPath();
 	canvasCtx.value.arc(centerX, centerY, avatarSize / 2, 0, Math.PI * 2);
 	canvasCtx.value.clip();
-	canvasCtx.value.drawImage(userAvatarImage.value, centerX - avatarSize / 2, centerY - avatarSize / 2, avatarSize, avatarSize);
+	canvasCtx.value.drawImage(userAvatarImage.value, avatarDx, avatarDy, avatarWidth, avatarHeight);
 	canvasCtx.value.restore();
 
 	if (isActuallyPlaying.value) {