implement sidebar

Author: apsinghdev

client/src/App.css

@@ -76,8 +76,6 @@
     box-shadow: 0 0 4px #000;
   }
 
-  /* #colorpicker{
-    margin-top: '40px';
-  } */
+
 
 

client/src/App.jsx

@@ -3,6 +3,7 @@ import './App.css'
 
 function App() {
   const canvasRef = useRef(null);
+  const sidebarRef = useRef(null);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -11,13 +12,16 @@ function App() {
     let startY = 0;
     const ctx = canvas.getContext("2d");
 
+    const canvasHeight = canvas.getBoundingClientRect().height;
+    const canvasWidht = canvas.getBoundingClientRect().width;
+
     function drawLine(sx, sy, ex, ey) {
-      ctx.beginPath();
-      ctx.moveTo(sx, sy);
-      ctx.lineTo(ex, ey);
-      ctx.strokeStyle = "blue";
-      ctx.lineWidth = 2;
-      ctx.stroke();
+    ctx.moveTo(sx, sy);
+    ctx.lineTo(ex, ey);
+    ctx.strokeStyle = ctx.strokeStyle;
+    ctx.lineWidth = ctx.lineWidth;
+    ctx.lineCap = 'round';
+    ctx.stroke();
     }
 
     function handleMouseover(e) {
@@ -36,12 +40,30 @@ function App() {
     }
     function handleMouseup(e) {
       isDrawing = false;
+      startX = 0;
+      startY = 0;
+      ctx.stroke();
+      ctx.beginPath();
     }
 
     canvas.addEventListener("mousemove", handleMouseover);
     canvas.addEventListener("mousedown", handleMousedown);
     canvas.addEventListener("mouseup", handleMouseup);
 
+    const sidebar = sidebarRef.current;
+    sidebar.addEventListener('click', (e)=>{
+      if(e.target.id === 'clear'){
+        ctx.clearRect(0, 0, canvasWidht, canvasHeight)
+      }
+      else if(e.target.id === 'stroke'){
+        ctx.strokeStyle = e.target.value;
+      }
+      else if(e.target.id === 'lineWidth'){
+        ctx.lineWidth = e.target.value;
+      }
+    })
+
+
     return () => {
       canvas.removeEventListener("mousemove", handleMouseover);
       canvas.removeEventListener("mousedown", handleMousedown);
@@ -51,15 +73,15 @@ function App() {
 
   return (
     <div id="container" style={{ display: 'flex' }}>
-  <div id="sidebar">
+  <div id="sidebar" ref={sidebarRef}>
     <h1 id="drawRTC">drawRTC</h1>
     <div className="input-container" id='colorpicker'>
       <label htmlFor="stroke">Stroke</label>
       <input id="stroke" name="stroke" type="color" />
     </div>
     <div className="input-container" id='linewidth'>
       <label htmlFor="lineWidth">Line Width</label>
-      <input id="lineWidth" name="lineWidth" type="number" value="5" />
+      <input id="lineWidth" name="lineWidth" type="number" defaultValue="5" />
     </div>
     <button id="clear">Clear</button>
   </div>