From cf7c82141b26cefa8cc77188f75665a07df7470c Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 27 Apr 2026 09:50:24 +0900
Subject: [PATCH] =?UTF-8?q?fix(study):=20debug=20=E2=80=94=20=EC=A2=8C?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EB=B9=A8=EA=B0=84=20=EC=82=AC=EA=B0=81?=
 =?UTF-8?q?=ED=98=95=20+=20=EB=B9=A8=EA=B0=84=20=EA=B5=B5=EC=9D=80=20strok?=
 =?UTF-8?q?e=20=EA=B0=95=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

stroke 가 안 보이는 원인 격리. iPad 화면에서:
- 좌상단 빨간 50x50 사각형 보임 + 빨간 stroke 보임 → 토큰 색 문제
- 사각형 보임 + stroke 안 보임 → drawStroke / strokeStyle 문제
- 사각형도 안 보임 → redraw 미호출 또는 canvas 자체 가려짐
---
 .../src/lib/components/HandwriteCanvas.svelte | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/HandwriteCanvas.svelte b/frontend/src/lib/components/HandwriteCanvas.svelte
index c99b4dc..ea0af62 100644
--- a/frontend/src/lib/components/HandwriteCanvas.svelte
+++ b/frontend/src/lib/components/HandwriteCanvas.svelte
@@ -117,25 +117,24 @@
     redraw();
   }
 
-  // ── render — 단순 ctx.stroke() 로 갈아치움 (perfect-freehand 미사용).
-  // 이유: perfect-freehand 의 polygon fill 이 그려지지 않는 보고. 단순 line 으로
-  // 안정성 확보 후 문제 격리. 압력 효과는 lineWidth 변경으로 흉내.
+  // ── render — 디버그 모드: stroke 빨강 + 굵게 + 좌상단 빨간 사각형 강제.
+  // 사용자 보고에 따라 격리: 빨간 사각형 보임 + 빨간 stroke 안 보임 → drawStroke 문제.
+  // 빨간 사각형도 안 보임 → redraw 미호출 / canvas 가려짐.
   function drawStroke(ctx: CanvasRenderingContext2D, s: Stroke) {
     if (s.points.length === 0) return;
-    ctx.beginPath();
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
-    ctx.lineWidth = baseSize;
-    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = 12;        // 디버그: 충분히 굵게
+    ctx.strokeStyle = '#ff3333'; // 디버그: 빨강 강제
+    ctx.fillStyle = '#ff3333';
     if (s.points.length === 1) {
-      // 점 하나만 있으면 작은 원
       const [x, y] = s.points[0];
       ctx.beginPath();
-      ctx.fillStyle = strokeColor;
-      ctx.arc(x, y, baseSize / 2, 0, Math.PI * 2);
+      ctx.arc(x, y, 6, 0, Math.PI * 2);
       ctx.fill();
       return;
     }
+    ctx.beginPath();
     ctx.moveTo(s.points[0][0], s.points[0][1]);
     for (let i = 1; i < s.points.length; i++) {
       ctx.lineTo(s.points[i][0], s.points[i][1]);
@@ -161,6 +160,11 @@
     if (!ctx) return;
     ctx.clearRect(0, 0, cssWidth, cssHeight);
     drawTraceBackground(ctx);
+
+    // 디버그: 좌상단 빨간 사각형 (50x50). 보이면 redraw + canvas 정상 동작.
+    ctx.fillStyle = '#ff0000';
+    ctx.fillRect(10, 10, 50, 50);
+
     for (const s of strokes) {
       drawStroke(ctx, s);
     }