DhanushNehru · eklipse18 · Oct 9, 2022 · Oct 9, 2022 · Oct 10, 2022
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
     <link rel="stylesheet" href="styles.css">
     <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <link href='https://css.gg/css' rel='stylesheet'>
 </head>
 <body>
     <div class="selectors">
@@ -12,20 +13,30 @@
         </div>
         <div class="color-selection pen-color">
             <div class="color-header">Pen Colour : </div>
-            <input type="color" name="penColor" id="pen-color">
+            <input type="color" name="penColor" id="pen-color" value="#000000">
+        </div>
+        <div class="stroke-selection">
+            <div class="stroke-header">Stroke: </div>
+            <input type="range" name="stroke" id="stroke" min="1" max="50" value="3">
         </div>
     </div>
     <div class="canvas-container">
         <canvas id="black-board"></canvas>
+        <div class="sidebar">
+            <button onclick="circle()" class="circle">
+                <i class="gg-shape-circle"></i>
+            </button>
+            <div class="clear-download-button">
+                <button class="clear" onclick="onClear()">Clear</button>
+                <button id="download">
+                    <img src="/assets/ico/download.svg">
+                </button>
+            </div>
+        </div>
     </div>
-
-    <div class="clear-download-button">
-        <button class="clear" onclick="onClear()">Clear</button>
-        <button id="download">
-            <img src="/assets/ico/download.svg">
-        </button>
-    </div>
-
+
+
+
     <script src="script.js"></script>
     <script src="colorChanges.js"></script>
 </body>

diff --git a/script.js b/script.js
@@ -142,6 +142,7 @@ function downloadOptions() {
 function blackBoard() {
   const canvas = document.getElementById("black-board");
   const ctx = canvas.getContext("2d");
+  const strokeInp = document.getElementById("stroke");
 
   //resizing
   canvas.width = canvas.getBoundingClientRect().width;
@@ -200,11 +201,13 @@ function blackBoard() {
 
   //event listeners
   canvas.addEventListener("mousedown", (event) => {
+    ctx.lineWidth = strokeInp.value
     painting = true;
     lastX = event.offsetX;
     lastY = event.offsetY;
   });
   canvas.addEventListener("touchstart", (event) => {
+    ctx.lineWidth = strokeInp.value
     painting = true;
     lastX = event.touches[0].clientX;
     lastY = event.touches[0].clientY;
@@ -215,6 +218,70 @@ function blackBoard() {
   canvas.addEventListener("touchmove", draw);
 }
 
+function circle() {
+  const canvas = document.getElementById("black-board");
+  const penColor = document.getElementById("pen-color");
+  const strokeInp = document.getElementById("stroke");
+  const ctx = canvas.getContext("2d", {
+    willReadFrequently: true,
+  });
+  let snapshot;
+
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  ctx.lineWidth = 2;
+  ctx.strokeStyle = "#FFFFFF";
+
+  let painting = false;
+  let lastX = 0;
+  let lastY = 0;
+
+  function endPosition() {
+    painting = false;
+    ctx.beginPath();
+    canvas.removeEventListener("mousemove", draw);
+    canvas.removeEventListener("touchmove", draw);
+  }
+
+  function get_radius(x1, y1, x2, y2) {
+    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  }
+
+  function draw(e) {
+    if (!painting) {
+      return;
+    }
+
+    e.preventDefault();
+    ctx.beginPath();
+    ctx.putImageData(snapshot, 0, 0)
+    ctx.arc(lastX, lastY, get_radius(lastX, lastY, e.offsetX, e.offsetY), 0, Math.PI * 2);
+    ctx.stroke();
+  }
+
+  //event listeners
+  canvas.addEventListener("mousedown", (event) => {
+    ctx.strokeStyle = penColor.value
+    ctx.lineWidth = strokeInp.value
+    painting = true;
+    snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    lastX = event.offsetX;
+    lastY = event.offsetY;
+  });
+  canvas.addEventListener("touchstart", (event) => {
+    ctx.strokeStyle = penColor.value
+    ctx.lineWidth = strokeInp.value
+    painting = true;
+    snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    lastX = event.touches[0].clientX;
+    lastY = event.touches[0].clientY;
+  });
+  canvas.addEventListener("mouseup", endPosition);
+  canvas.addEventListener("touchend", endPosition);
+  canvas.addEventListener("mousemove", draw);
+  canvas.addEventListener("touchmove", draw);
+}
+
 function onClear() {
   const canvas = document.getElementById("black-board");
   const context = canvas.getContext("2d");

diff --git a/styles.css b/styles.css
@@ -15,7 +15,7 @@ body {
 }
 
 .selectors {
-  margin: auto;
+  margin: 20px auto 20px auto;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,11 +37,10 @@ body {
 }
 
 .canvas-container {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
+  margin: auto;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
 }
 
 canvas {
@@ -55,27 +54,29 @@ canvas {
   cursor: url(./assets/ico/pen-cursor.ico) 0 50, pointer;
 }
 
-.clear-button {
-  padding: 30px;
-  position: absolute;
-  right: 200px;
+.circle i {
+  margin: auto;
 }
 
-.clear-button button {
+button {
+  --ggs: 2;
   cursor: pointer;
   border: none;
+  margin: 30px;
   color: white;
   padding: 15px 30px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
+  height: 55px;
   font-size: 20px;
   background: linear-gradient(to left, purple, rgb(187, 62, 187));
   border-radius: 15px;
-  width: 100%;
+  width: 80%;
+  transition: color 0.2s;
 }
 
-.clear-button button:hover {
+button:hover {
   color: black;
   background-color: white;
 }