Merge branch 'main' of https://github.com/adanrsantos/ThePlaceHolders

static/canvas.html

@@ -14,10 +14,9 @@
     <div class="wrapper">
       <div class="navbarCont">
         <h1>ThePlaceHolders</h1>
-        
       </div>
       <div class="canvasCont">
-        <canvas id="canvas" width="850" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
+        <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
         <div id="toolbar" class="toolbar">
           <div class="toolbarItems">
             <label for="stroke">Strokes</label>

static/canvas.js

@@ -1,23 +1,70 @@
 const canvas = document.getElementById("canvas");
-const toolbar = document.getElementById("toolbar");
-const strokePicker = document.getElementById("stroke");
 const ctx = canvas.getContext("2d");
 
-const canvasOffsetX = canvas.offsetLeft;
+canvas.width = 500;
-const canvasOffsetY = canvas.offsetTop;
-
-canvas.width = 850;
 canvas.height = 500;
+const dataSize = 1000;
 
+let x;
+let y;
+let pixelSize = canvas.width / dataSize;
+const centerPixel = pixelSize / 2;
+
+function draw() {
+    ctx.fillRect(x, y, pixelSize, pixelSize);
+}
+
+canvas.addEventListener("mousedown", (e) => {
+    x = e.clientX - canvas.getBoundingClientRect().left - centerPixel;
+    y = e.clientY - canvas.getBoundingClientRect().top - centerPixel;
+    draw();
+})
+
+//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"){
@@ -54,3 +101,4 @@ canvas.addEventListener("mouseup", (e) => {
 });
 
 canvas.addEventListener("mousemove", draw);
+*/