Fix: Improve JS canvas initialization and event handling

app.py

@@ -233,113 +233,116 @@ def predict(strokes_json):
 # ============================================================================
 
 CANVAS_HTML = """
-<div id="canvas-container" style="display: flex; flex-direction: column; align-items: center;">
+<div id="canvas-container" style="display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10;">
     <canvas id="drawing-canvas" width="400" height="400" 
-            style="border: 2px solid #333; border-radius: 8px; background: white; cursor: crosshair;"></canvas>
+            style="border: 2px solid #333; border-radius: 8px; background: white; cursor: crosshair; touch-action: none;"></canvas>
     <div style="margin-top: 10px;">
-        <button onclick="clearCanvas()" style="padding: 8px 16px; margin-right: 10px; cursor: pointer;">Clear</button>
+        <button onclick="clearCanvas()" style="padding: 8px 16px; margin-right: 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff;">Clear</button>
         <button onclick="sendStrokes()" style="padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Predict</button>
     </div>
     <p style="color: #666; font-size: 12px; margin-top: 5px;">Draw an animal, then click Predict</p>
 </div>
 
 <script>
-const canvas = document.getElementById('drawing-canvas');
-const ctx = canvas.getContext('2d');
-let isDrawing = false;
-let strokes = [];
-let currentStroke = {x: [], y: []};
-
-ctx.strokeStyle = '#000';
-ctx.lineWidth = 3;
-ctx.lineCap = 'round';
-ctx.lineJoin = 'round';
-
-canvas.addEventListener('mousedown', (e) => {
-    isDrawing = true;
-    const rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    currentStroke = {x: [x], y: [y]};
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-});
-
-canvas.addEventListener('mousemove', (e) => {
-    if (!isDrawing) return;
-    const rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    currentStroke.x.push(x);
-    currentStroke.y.push(y);
-    ctx.lineTo(x, y);
-    ctx.stroke();
-});
-
-canvas.addEventListener('mouseup', () => {
-    if (isDrawing && currentStroke.x.length > 1) {
-        strokes.push([currentStroke.x, currentStroke.y]);
-    }
-    isDrawing = false;
-});
-
-canvas.addEventListener('mouseleave', () => {
-    if (isDrawing && currentStroke.x.length > 1) {
-        strokes.push([currentStroke.x, currentStroke.y]);
-    }
-    isDrawing = false;
-});
-
-// Touch support
-canvas.addEventListener('touchstart', (e) => {
-    e.preventDefault();
-    const touch = e.touches[0];
-    const rect = canvas.getBoundingClientRect();
-    const x = touch.clientX - rect.left;
-    const y = touch.clientY - rect.top;
-    isDrawing = true;
-    currentStroke = {x: [x], y: [y]};
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-});
-
-canvas.addEventListener('touchmove', (e) => {
-    e.preventDefault();
-    if (!isDrawing) return;
-    const touch = e.touches[0];
-    const rect = canvas.getBoundingClientRect();
-    const x = touch.clientX - rect.left;
-    const y = touch.clientY - rect.top;
-    currentStroke.x.push(x);
-    currentStroke.y.push(y);
-    ctx.lineTo(x, y);
-    ctx.stroke();
-});
-
-canvas.addEventListener('touchend', () => {
-    if (isDrawing && currentStroke.x.length > 1) {
-        strokes.push([currentStroke.x, currentStroke.y]);
-    }
-    isDrawing = false;
-});
-
-function clearCanvas() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    strokes = [];
-}
-
-function sendStrokes() {
-    const strokesJson = JSON.stringify(strokes);
-    // Update the hidden textbox with strokes data
-    const textbox = document.querySelector('#strokes-input textarea');
-    if (textbox) {
-        textbox.value = strokesJson;
-        textbox.dispatchEvent(new Event('input', { bubbles: true }));
-    }
-    // Also trigger the button
-    const btn = document.querySelector('#predict-btn');
-    if (btn) btn.click();
-}
+(function() {
+    // Wait for DOM
+    setTimeout(() => {
+        const canvas = document.getElementById('drawing-canvas');
+        if (!canvas) {
+            console.error("Canvas not found!");
+            return;
+        }
+        
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        let isDrawing = false;
+        let strokes = [];
+        let currentStroke = {x: [], y: []};
+
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 3;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+
+        // Mouse Events
+        canvas.addEventListener('mousedown', (e) => {
+            isDrawing = true;
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            currentStroke = {x: [x], y: [y]};
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+        });
+
+        canvas.addEventListener('mousemove', (e) => {
+            if (!isDrawing) return;
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            currentStroke.x.push(x);
+            currentStroke.y.push(y);
+            ctx.lineTo(x, y);
+            ctx.stroke();
+        });
+
+        const endStroke = () => {
+            if (isDrawing && currentStroke.x.length > 0) {
+                strokes.push([currentStroke.x, currentStroke.y]);
+            }
+            isDrawing = false;
+        };
+
+        canvas.addEventListener('mouseup', endStroke);
+        canvas.addEventListener('mouseleave', endStroke);
+
+        // Touch Events
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            const rect = canvas.getBoundingClientRect();
+            const x = touch.clientX - rect.left;
+            const y = touch.clientY - rect.top;
+            isDrawing = true;
+            currentStroke = {x: [x], y: [y]};
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+        }, { passive: false });
+
+        canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            if (!isDrawing) return;
+            const touch = e.touches[0];
+            const rect = canvas.getBoundingClientRect();
+            const x = touch.clientX - rect.left;
+            const y = touch.clientY - rect.top;
+            currentStroke.x.push(x);
+            currentStroke.y.push(y);
+            ctx.lineTo(x, y);
+            ctx.stroke();
+        }, { passive: false });
+
+        canvas.addEventListener('touchend', endStroke);
+
+        // Global functions for buttons
+        window.clearCanvas = function() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            strokes = [];
+        };
+
+        window.sendStrokes = function() {
+            const strokesJson = JSON.stringify(strokes);
+            const textbox = document.querySelector('#strokes-input textarea');
+            if (textbox) {
+                textbox.value = strokesJson;
+                textbox.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+            const btn = document.querySelector('#predict-btn');
+            if (btn) btn.click();
+        };
+        
+        console.log("Canvas initialized!");
+    }, 500); // Small delay to ensure render
+})();
 </script>
 """