diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 28720d9023..55ed9f1dca 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -31,23 +31,10 @@ let loaded = $ref(false);
 let width = $ref(props.width);
 let height = $ref(props.height);
 
-function draw() {
-	if (props.hash == null) return;
-	const pixels = decode(props.hash, props.width, props.height);
-	const ctx = canvas.getContext('2d');
-	const imageData = ctx!.createImageData(props.width, props.height);
-	imageData.data.set(pixels);
-	ctx!.putImageData(imageData, 0, 0);
-}
-
 function onLoad() {
 	loaded = true;
 }
 
-watch(() => props.hash, () => {
-	draw();
-});
-
 watch([() => props.width, () => props.height], () => {
 	const ratio = props.width / props.height;
 	if (ratio > 1) {
@@ -61,6 +48,19 @@ watch([() => props.width, () => props.height], () => {
 	immediate: true,
 });
 
+function draw() {
+	if (props.hash == null) return;
+	const pixels = decode(props.hash, width, height);
+	const ctx = canvas.getContext('2d');
+	const imageData = ctx!.createImageData(props.width, props.height);
+	imageData.data.set(pixels);
+	ctx!.putImageData(imageData, 0, 0);
+}
+
+watch(() => props.hash, () => {
+	draw();
+});
+
 onMounted(() => {
 	draw();
 });