Add better drawing method using cells

loginween/templates/login.jinja2

@@ -17,7 +17,7 @@
 {% block body %}
 <div class="position-absolute top-50 start-50 translate-middle text-center">
   <h1>LoginWeen: Draw your carving to log in!</h1>
-  <canvas id="pumpkin_canvas" width="300" height="300" class="my-3"></canvas>
+  <canvas id="pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
   <div class="buttons">
     <button type="button" class="btn btn-primary me-2" id="loginBtn">Login</button>
     <button id="clearBtn" class="btn btn-danger">Clear</button>
@@ -30,8 +30,12 @@ const ctx = canvas.getContext('2d');
 const img = new Image();
 img.src = '/static/pumpkin.png';
 
+const GRID_SIZE = 25;
+const CELL_SIZE = canvas.width / GRID_SIZE;
+
 img.onload = () => {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  drawGrid();
 };
 
 let drawing = false;
@@ -39,32 +43,53 @@ let currentPattern = [];
 let savedPattern = null;
 
 canvas.addEventListener('mousedown', () => { drawing = true; });
-canvas.addEventListener('mouseup', () => { drawing = false; ctx.beginPath(); });
+canvas.addEventListener('mouseup', () => { drawing = false; });
 canvas.addEventListener('mousemove', draw);
 
 function draw(e) {
     if (!drawing) return;
-    const rect = canvas.getBoundingClientRect();
+    var rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
+    var x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+    var y = e.clientY - rect.top;
 
-    const imageData = ctx.getImageData(x, y, 1, 1);
+    var gridX = Math.floor(x / CELL_SIZE);
-    const pixel = imageData.data;
+    var gridY = Math.floor(y / CELL_SIZE);
 
-    const r = pixel[0];
+    var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
-    const g = pixel[1];
+    var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
-    const b = pixel[2];
+
-    const a = pixel[3];
+    var pixel = ctx.getImageData(cellX, cellY, 1, 1).data;
+
+    if (pixel[0] == 255 && pixel[1] == 126) {
+        var key = `${gridX},${gridY}`;
+
+        if (!currentPattern.includes(key)) {
+            currentPattern.push(key);
+            ctx.fillStyle = 'black'; 
+            ctx.fillRect(cellX - CELL_SIZE / 3, cellY - CELL_SIZE / 3, CELL_SIZE, CELL_SIZE);
+        }
+    }
+    else {
+        console.log(pixel);
+    }
+}
+
+function drawGrid() {
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.6)';
+    ctx.lineWidth = 1;
+
+    for (let i = 0; i <= GRID_SIZE; i++) {
+        const pos = i * CELL_SIZE;
 
-    if (r == 255 && g == 126 && b == 0 && a !== 0) {
-        currentPattern.push([x, y]);
-        ctx.lineWidth = canvas.width / 30;
-        ctx.lineCap = 'round';
-        ctx.strokeStyle = 'black';
-        ctx.lineTo(x, y);
-        ctx.stroke();
         ctx.beginPath();
-        ctx.moveTo(x, y);
+        ctx.moveTo(pos, 0);
+        ctx.lineTo(pos, canvas.height);
+        ctx.stroke();
+
+        ctx.beginPath()
+        ctx.moveTo(0, pos);
+        ctx.lineTo(canvas.width, pos);
+        ctx.stroke()
     }
 }
 
@@ -77,6 +102,7 @@ document.getElementById('clearBtn').addEventListener('click', clearCanvas);
 function clearCanvas() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  drawGrid()
   currentPattern = [];
 }