Update index.html

index.html

@@ -903,7 +903,12 @@
                 wrapper.appendChild(canvas);
 
                 // 3. 設定 Context
-                canvasCtx = canvas.getContext('2d');
+                canvasCtx = canvas.getContext('2d', { willReadFrequently: true }); // [優化] 加入讀取優化提示
+                
+                // [修改] 為了 TrOCR 模型，強制將畫布背景填滿白色像素 (透明背景會導致辨識失敗)
+                canvasCtx.fillStyle = '#ffffff';
+                canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
                 canvasCtx.lineWidth = 10; // [修改] 增加線條寬度以利 OCR 辨識
                 canvasCtx.lineCap = 'round';
                 canvasCtx.lineJoin = 'round';
@@ -1001,7 +1006,11 @@
             function clearCanvas() {
                 const canvas = document.getElementById('handwriting-canvas');
                 if(!canvas || !canvasCtx) return;
-                canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+                
+                // [修改] 使用 fillRect 填滿白色，取代 clearRect (避免透明背景)
+                canvasCtx.fillStyle = '#ffffff';
+                canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+                
                 currentStrokes = [];
                 answerInput.value = '';
                 candidateBar.innerHTML = '';
@@ -1019,7 +1028,10 @@
             function redrawCanvas() {
                 const canvas = document.getElementById('handwriting-canvas');
                 if(!canvas || !canvasCtx) return;
-                canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+                
+                // [修改] 重繪前先填滿白色背景
+                canvasCtx.fillStyle = '#ffffff';
+                canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
                 
                 canvasCtx.beginPath();
                 currentStrokes.forEach(stroke => {