static/canvas.html

@@ -18,15 +18,16 @@
       <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">
-            <button onclick="zoomIn"id="zoomIn">+</button>
+            <label for="lineWidth">Line Width</label>
+            <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,36 +2,37 @@ const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
 const canvasSize = 500;
+const dataSize = 1000;
+const gridCount = 10;
 let zoom = 1.0;
-let baseGridCount = 500; // Base grid count at zoom = 1
+const centerPixel = getPixelSize() / 2;
-let gridCount = baseGridCount;
+
-let pixelSize = canvasSize / gridCount;
+function getPixelSize() {
+    return canvasSize / gridCount * zoom;
+}
 
 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 <= gridCount; i++) {
-        let y = i * pixelSize;
+        let y = i * getPixelSize();
         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 * pixelSize;
+        let x = i * getPixelSize();
         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)
@@ -39,7 +40,7 @@ function drawGrid() {
     }
 }
 
-//drawGrid();
+drawGrid();
 
 class Point {
     // new Point(x, y)
@@ -86,50 +87,14 @@ class Point {
     }
 }
 
-function draw(point, color) {
+function draw(point) {
-    point = point.canvasToData().dataToCanvas();
+    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 - (pixelSize / 2);
+    let x = e.clientX - canvas.getBoundingClientRect().left - centerPixel;
-    let y = e.clientY - canvas.getBoundingClientRect().top - (pixelSize / 2);
+    let y = e.clientY - canvas.getBoundingClientRect().top - centerPixel;
-    let color = document.getElementById("stroke").value;
+    let point = new Point(x, y)
-    let point = new Point(x, y);
+    draw(point);
-    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
 });