thickness and eraser option added

colorChanges.js

@@ -1,14 +1,52 @@
 const canvas = document.getElementById("black-board");
 const boardColorInp = document.getElementById("board-color");
 const penColorInp = document.getElementById("pen-color");
+const penThicknessInp = document.getElementById("pen-thickness");
+const eraserBtn = document.getElementById("eraser-btn");
+const eraserThicknessInp = document.getElementById("eraser-thickness");
 
+let isEraserEnabled = false;
+
+// Change board color
 boardColorInp.addEventListener("change", (e) => {
   const color = e.target.value;
   canvas.style.backgroundColor = color;
 });
 
+// Change pen color and thickness
 penColorInp.addEventListener("change", (e) => {
   const color = e.target.value;
   const context = canvas.getContext("2d");
   context.strokeStyle = color;
 });
+
+// Change pen thickness
+penThicknessInp.addEventListener("input", (e) => {
+  const thickness = e.target.value;
+  const context = canvas.getContext("2d");
+  context.lineWidth = thickness;
+});
+
+// Toggle eraser mode
+eraserBtn.addEventListener("click", () => {
+  isEraserEnabled = !isEraserEnabled;
+  const context = canvas.getContext("2d");
+
+  if (isEraserEnabled) {
+    context.strokeStyle = "#FFFFFF"; // Change to background color for erasing
+    eraserBtn.textContent = "Disable Eraser";
+  } else {
+    context.strokeStyle = penColorInp.value; // Switch back to pen color
+    eraserBtn.textContent = "Enable Eraser";
+  }
+});
+
+// Change eraser thickness
+eraserThicknessInp.addEventListener("input", (e) => {
+  const thickness = e.target.value;
+  const context = canvas.getContext("2d");
+
+  // Apply eraser thickness
+  context.lineWidth = thickness;
+});
+

index.html

@@ -97,10 +97,41 @@
           value="#FFFFFF"
         />
       </div>
+
       <div class="color-selection pen-color">
         <div class="color-header">Pen Colour :</div>
         <input type="color" name="penColor" id="pen-color" />
       </div>
+
+      <div class="color-selection pen-thickness">
+        <div class="color-header">Pen Thickness :</div>
+        <input
+          type="range"
+          name="penThickness"
+          id="pen-thickness"
+          min="1"
+          max="10"
+          value="5"
+        />
+      </div>
+
+      <div class="color-selection eraser">
+        <div class="color-header">Eraser :</div>
+        <button id="eraser-btn">Enable Eraser</button>
+      </div>
+
+      <div class="color-selection eraser-thickness">
+        <div class="color-header">Eraser Thickness :</div>
+        <input
+          type="range"
+          name="eraserThickness"
+          id="eraser-thickness"
+          min="5"
+          max="30"
+          value="10"
+        />
+      </div>
+
     </div>
     <div class="canvas-container">
       <canvas id="black-board"></canvas>

styles.css

@@ -13,7 +13,30 @@ body {
   align-items: center;
   justify-content: center;
 }
+#eraser-btn{
+  padding: 6px 10px;
+  border-radius: 5px;
+  border: none;
+  outline: none;
+}
+#eraser-btn:hover{
+  padding: 6px 10px;
+  border-radius: 5px;
+  border: none;
+  outline: none;
+  background: #888;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px);
+}
+#eraser-btn:active {
+  background-color: #415c88;
+  transform: translateY(0); 
+  color: white;
 
+}
 .selectors {
   margin: auto;
   display: flex;