changes

Author: SkvProgrammer

index.html

@@ -69,6 +69,9 @@
           <button id="eraser-tool" class="btn btn-light w-100 mb-3" title="Eraser">
             <i class="fas fa-eraser"></i>
           </button>
+          <button id="text-tool" class="btn btn-light w-100 mb-3" title="Add Text">
+            <i class="fas fa-font"></i>
+          </button>
         </div>
 
         <!-- Shapes Menu -->
@@ -133,7 +136,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
       // JavaScript to handle tool selection and update background color
-      const tools = document.querySelectorAll('#select-tool, #pen-tool, #eraser-tool, #draw-line, #draw-rect, #draw-circle');
+      const tools = document.querySelectorAll('#select-tool, #pen-tool, #eraser-tool, #draw-line, #draw-rect, #draw-circle, #text-tool');
 
       tools.forEach(tool => {
         tool.addEventListener('click', () => {
@@ -144,7 +147,8 @@
           tool.classList.add('selected');
         });
       });
-    </script>
+
+     </script>
     <script src="script.js"></script>
   </body>
 </html>

script.js

@@ -2,20 +2,19 @@
 const canvas = document.getElementById("whiteboard");
 const ctx = canvas.getContext("2d");
 
-
 // Canvas setup
 function resizeCanvas() {
-    // Save the current canvas content
-    const savedContent = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  
-    // Resize the canvas
-    canvas.width = canvas.parentElement.offsetWidth;
-    canvas.height = canvas.parentElement.offsetHeight;
-  
-    // Restore the saved content
-    ctx.putImageData(savedContent, 0, 0);
-  }
-resizeCanvas();  
+  // Save the current canvas content
+  const savedContent = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+  // Resize the canvas
+  canvas.width = canvas.parentElement.offsetWidth;
+  canvas.height = canvas.parentElement.offsetHeight;
+
+  // Restore the saved content
+  ctx.putImageData(savedContent, 0, 0);
+}
+resizeCanvas();
 window.addEventListener("resize", resizeCanvas);
 
 // Variables for drawing
@@ -49,17 +48,14 @@ document.getElementById("fullscreen").addEventListener("click", () => {
 // Side menu tools
 document.getElementById("pen-tool").addEventListener("click", () => {
   currentTool = "pen";
-  canvas.className = "pen";
 });
 
 document.getElementById("eraser-tool").addEventListener("click", () => {
   currentTool = "eraser";
-  canvas.className = "eraser";
 });
 
 document.getElementById("select-tool").addEventListener("click", () => {
   currentTool = "select";
-  canvas.className = "select";
 });
 
 document.getElementById("draw-line").addEventListener("click", () => {
@@ -74,6 +70,10 @@ document.getElementById("draw-circle").addEventListener("click", () => {
   currentTool = "circle";
 });
 
+document.getElementById("text-tool").addEventListener("click", () => {
+  currentTool = "text";
+});
+
 // Drawing functions
 let startX, startY;
 
@@ -132,6 +132,13 @@ canvas.addEventListener("mouseup", (e) => {
     ctx.beginPath();
     ctx.arc(startX, startY, radius, 0, Math.PI * 2);
     ctx.stroke();
+  } else if (currentTool === "text") {
+    const text = prompt("Enter the text:");
+    if (text) {
+      ctx.fillStyle = brushColor;
+      ctx.font = `${brushSize * 2}px Arial`;
+      ctx.fillText(text, startX, startY);
+    }
   }
 });