figuring out the pixels but need to work on zoom

static/canvas.html

@@ -18,16 +18,15 @@
       <div class="canvasCont">
         <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
         <div id="toolbar" class="toolbar">
+          <div class="toolbarItems">
+            <button id="zoomOut">-</button>
+          </div>
           <div class="toolbarItems">
             <label for="stroke">Strokes</label>
             <input id="stroke" name="stroke" type="color" class="strokePicker">
           </div>
           <div class="toolbarItems">
-            <label for="lineWidth">Line Width</label>
+            <button onclick="zoomIn"id="zoomIn">+</button>
-            <input id="lineWidth" name="lineWidth" type="number" value="5" min="1" max="10">
-          </div>
-          <div class="toolbarItems">
-            <button id="clear">Clear</button>
           </div>
         </div>
       </div>  

static/canvas.js

@@ -2,37 +2,36 @@ const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
 const canvasSize = 500;
-const dataSize = 1000;
-const gridCount = 10;
 let zoom = 1.0;
-const centerPixel = getPixelSize() / 2;
+let baseGridCount = 500; // Base grid count at zoom = 1
-
+let gridCount = baseGridCount;
-function getPixelSize() {
+let pixelSize = canvasSize / gridCount;
-    return canvasSize / gridCount * zoom;
-}
 
 canvas.width = canvasSize;
 canvas.height = canvasSize;
 
-function drawGrid() {
+function updateGridCount() {
-    if (getPixelSize() < 5) {
+    return Math.floor(baseGridCount / zoom); // Adjust grid count based on zoom
-        return;
 }
+
+function updatePixelSize() {
+    return canvasSize / gridCount; // Update pixel size based on new grid count
+}
+
+function drawGrid() {
     ctx.strokeStyle = '#000'; // Set grid line color
     ctx.lineWidth = 1; // Set grid line width
-
     // Draw horizontal lines
     for (let i = 0; i <= gridCount; i++) {
-        let y = i * getPixelSize();
+        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 <= gridCount; i++) {
-        let x = i * getPixelSize();
+        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)
@@ -40,7 +39,7 @@ function drawGrid() {
     }
 }
 
-drawGrid();
+//drawGrid();
 
 class Point {
     // new Point(x, y)
@@ -87,14 +86,50 @@ class Point {
     }
 }
 
-function draw(point) {
+function draw(point, color) {
-    point = point.canvasToData().dataToCanvas()
+    point = point.canvasToData().dataToCanvas();
-    ctx.fillRect(point.x, point.y, getPixelSize(), getPixelSize());
+    ctx.fillStyle = color;
+    ctx.fillRect(point.x, point.y, pixelSize, pixelSize);
 }
 
 canvas.addEventListener("mousedown", (e) => {
-    let x = e.clientX - canvas.getBoundingClientRect().left - centerPixel;
+    let x = e.clientX - canvas.getBoundingClientRect().left - (pixelSize / 2);
-    let y = e.clientY - canvas.getBoundingClientRect().top - centerPixel;
+    let y = e.clientY - canvas.getBoundingClientRect().top - (pixelSize / 2);
-    let point = new Point(x, y)
+    let color = document.getElementById("stroke").value;
-    draw(point);
+    let point = new Point(x, y);
+    draw(point, color);
+});
+
+document.getElementById("zoomIn").addEventListener("click", () => {
+    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);
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawGrid(); // Redraw the grid with updated zoom
+});
+
+document.getElementById("zoomOut").addEventListener("click", () => {
+    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);
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawGrid(); // Redraw the grid with updated zoom
 });