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); }