figuring out the pixels but need to work on zoom

static/canvas.js

@@ -2,41 +2,36 @@ const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
 const canvasSize = 500;
-const dataSize = 1000;
 let zoom = 1.0;
-
-function getGridCount() {
-    return canvasSize / zoom;
-}
-
-function getCenterPixel() {
-    return getPixelSize() / 2;
-}
-
-function getPixelSize() {
-    return canvasSize / getGridCount() * zoom;
-}
+let baseGridCount = 500; // Base grid count at zoom = 1
+let gridCount = baseGridCount;
+let pixelSize = canvasSize / gridCount;
 
 canvas.width = canvasSize;
 canvas.height = canvasSize;
 
+function updateGridCount() {
+    return Math.floor(baseGridCount / zoom); // Adjust grid count based on zoom
+}
+
+function updatePixelSize() {
+    return canvasSize / gridCount; // Update pixel size based on new grid count
+}
+
 function drawGrid() {
-    if (getPixelSize() < 5) {
-        return;
-    }
     ctx.strokeStyle = '#000'; // Set grid line color
     ctx.lineWidth = 1; // Set grid line width
     // Draw horizontal lines
-    for (let i = 0; i <= getGridCount(); i++) {
-        let y = i * getPixelSize();
+    for (let i = 0; i <= gridCount; i++) {
+        let y = i * pixelSize;
         ctx.beginPath();
         ctx.moveTo(0, y); // Start the line at the left edge (x = 0)
         ctx.lineTo(canvasSize, y); // Draw to the right edge (x = canvasSize)
         ctx.stroke();
     }
     // Draw vertical lines
-    for (let i = 0; i <= getGridCount(); i++) {
-        let x = i * getPixelSize();
+    for (let i = 0; i <= gridCount; i++) {
+        let x = i * pixelSize;
         ctx.beginPath();
         ctx.moveTo(x, 0); // Start the line at the top edge (y = 0)
         ctx.lineTo(x, canvasSize); // Draw to the bottom edge (y = canvasSize)
@@ -44,7 +39,7 @@ function drawGrid() {
     }
 }
 
-drawGrid();
+//drawGrid();
 
 class Point {
     // new Point(x, y)
@@ -55,15 +50,15 @@ class Point {
     // Convert canvas position to data position
     canvasToData() {
         return new Point(
-            Math.round(this.x / canvasSize * getGridCount()),
-            Math.round(this.y / canvasSize * getGridCount())
+            Math.round(this.x / canvasSize * gridCount),
+            Math.round(this.y / canvasSize * gridCount)
         );
     }
     // Convert data position to canvas position
     dataToCanvas() {
         return new Point(
-            this.x / getGridCount() * canvasSize,
-            this.y / getGridCount() * canvasSize
+            this.x / gridCount * canvasSize,
+            this.y / gridCount * canvasSize
         );
     }
     // Convert to array index
@@ -92,34 +87,49 @@ class Point {
 }
 
 function draw(point, color) {
-    point = point.canvasToData().dataToCanvas()
-    console.log(point.x + " " + point.y);
+    point = point.canvasToData().dataToCanvas();
     ctx.fillStyle = color;
-    ctx.fillRect(point.x, point.y, getPixelSize(), getPixelSize());
+    ctx.fillRect(point.x, point.y, pixelSize, pixelSize);
 }
 
 canvas.addEventListener("mousedown", (e) => {
-    let x = e.clientX - canvas.getBoundingClientRect().left - getCenterPixel();
-    let y = e.clientY - canvas.getBoundingClientRect().top - getCenterPixel();
+    let x = e.clientX - canvas.getBoundingClientRect().left - (pixelSize / 2);
+    let y = e.clientY - canvas.getBoundingClientRect().top - (pixelSize / 2);
     let color = document.getElementById("stroke").value;
-    let point = new Point(x, y)
+    let point = new Point(x, y);
     draw(point, color);
 });
 
 document.getElementById("zoomIn").addEventListener("click", () => {
-    if (zoom < 100.0){
-        zoom += 1.0;
+    if (zoom < 100.0) {
+        if (zoom == 1.0){
+            zoom = 4.0;
+        }
+        else{
+            zoom += 4.0;
+        }
+        gridCount = updateGridCount();
+        pixelSize = updatePixelSize();
+        console.log(zoom);
+        console.log(gridCount);
     }
-    console.log(zoom);
-    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawGrid(); // Redraw the grid with updated zoom
 });
 
 document.getElementById("zoomOut").addEventListener("click", () => {
-    if (zoom > 1.0){
-        zoom -= 1.0;
+    if (zoom > 1.0) {
+        if (zoom <= 4.0){
+            zoom = 1.0;
+        }
+        else{
+            zoom -= 4.0;
+        }
+        gridCount = updateGridCount();
+        pixelSize = updatePixelSize();
+        console.log(zoom);
+        console.log(gridCount);
     }
-    console.log(zoom);
-    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawGrid(); // Redraw the grid with updated zoom
 });