working on canvas

static/canvas.js

@@ -3,9 +3,39 @@ const ctx = canvas.getContext("2d");
 
 const canvasSize = 500;
 const dataSize = 1000;
+const gridCount = 10    ;
 canvas.width = canvasSize;
 canvas.height = canvasSize;
 
+//let pixelSize = canvasSize / dataSize;
+let pixelSize = canvasSize / gridCount;
+const centerPixel = pixelSize / 2;
+
+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 * 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 * 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)
+        ctx.stroke();
+    }
+}
+
+drawGrid();
+
 class Point {
     // new Point(x, y)
     constructor(x, y) {
@@ -51,98 +81,13 @@ class Point {
     }
 }
 
-let pixelSize = canvasSize / dataSize;
-const centerPixel = pixelSize / 2;
-
-function draw(x, y) {
-    ctx.fillRect(x, y, pixelSize, pixelSize);
+function draw(point) {
+    ctx.fillRect(point.x, point.y, pixelSize, pixelSize);
 }
 
 canvas.addEventListener("mousedown", (e) => {
     let x = e.clientX - canvas.getBoundingClientRect().left - centerPixel;
     let y = e.clientY - canvas.getBoundingClientRect().top - centerPixel;
-    draw(x, y);
-})
-
-//const toolbar = document.getElementById("toolbar");
-//const strokePicker = document.getElementById("stroke");
-//const canvasOffsetX = canvas.offsetLeft;
-//const canvasOffsetY = canvas.offsetTop;
-//canvas.width = 150;
-//canvas.height = 150;
-
-/*
-let isPainting = false;
-let lineWidth = 5;
-let strokeColor = "#000000";
-let startX;
-let startY;
-
-function drawGrid(lineInterval, lineColor) {
-    // Set the color of the grid lines
-    ctx.strokeStyle = lineColor;
-    ctx.lineWidth = 1;  // Set the gridline thickness
-    
-    // Draw vertical grid lines
-    for (let x = 0; x <= canvas.width; x += lineInterval) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);  // Start from top of the canvas
-        ctx.lineTo(x, canvas.height);  // Draw line down to the bottom
-        ctx.stroke();
-    }
-    
-    // Draw horizontal grid lines
-    for (let y = 0; y <= canvas.height; y += lineInterval) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);  // Start from the left of the canvas
-        ctx.lineTo(canvas.width, y);  // Draw line across to the right
-        ctx.stroke();
-    }
-    ctx.beginPath();
-}
-
-// Call the drawGrid function with 50px intervals and a light gray color
-drawGrid(10, '#A9A9A9');
-
-toolbar.addEventListener("click", e => {
-    if (e.target.id === "clear"){
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        drawGrid(10, '#A9A9A9');
-    }
-
-    if (e.target.id === "lineWidth"){
-        lineWidth = e.target.value;
-    }
+    let point = new Point(x, y)
+    draw(point);
 });
-
-strokePicker.addEventListener("input", (e) => {
-    strokeColor = e.target.value;
-});
-
-const draw = (e) => {
-    if (!isPainting){
-        return;
-    }
-    ctx.lineWidth = lineWidth;
-    ctx.strokeStyle = strokeColor;
-    ctx.lineCap = "round";
-
-    ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
-    ctx.stroke();
-}
-
-canvas.addEventListener("mousedown", (e) => {
-    isPainting = true;
-    startX = e.clientX;
-    startY = e.clientY;
-});
-
-canvas.addEventListener("mouseup", (e) => {
-    isPainting = false;
-    ctx.stroke();
-    ctx.beginPath();
-});
-
-canvas.addEventListener("mousemove", draw);
-*/