From bb532d39b3119b79a283d42c71b76c8f8df4ccec Mon Sep 17 00:00:00 2001
From: Sarthak Sharma <7lovesharma7@gmail.com>
Date: Tue, 15 Dec 2020 23:38:09 +0530
Subject: [PATCH] =?UTF-8?q?Canvas=20in=20draw=20in=20now=20responsie=20?=
 =?UTF-8?q?=F0=9F=9A=80=20(#11876)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/javascript/chat/draw/index.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/javascript/chat/draw/index.jsx b/app/javascript/chat/draw/index.jsx
index d8cd41d93..f5a4dff61 100644
--- a/app/javascript/chat/draw/index.jsx
+++ b/app/javascript/chat/draw/index.jsx
@@ -18,6 +18,7 @@ import { Button } from '@crayons';
  */
 function Draw({ sendCanvasImage }) {
   const canvasRef = useRef(null);
+  const canvasWidth = useRef(null);
   const [isDrawing, setIsDrawing] = useState(false);
   const [drawColor, setDrawColor] = useState('#F58F8E');
   const [coordinates, setCoordinates] = useState({});
@@ -72,7 +73,6 @@ function Draw({ sendCanvasImage }) {
 
   const handleDragHover = (e) => {
     e.preventDefault();
-
     canvasRef.current.classList.add('opacity-25');
   };
 
@@ -98,11 +98,14 @@ function Draw({ sendCanvasImage }) {
     setIsDrawing(false);
   };
 
+  useEffect(() => {
+    canvasRef.current.width = canvasWidth.current.clientWidth;
+  }, [canvasWidth]);
+
   useEffect(() => {
     if (!canvasRef.current) {
       return;
     }
-
     const context = canvasRef.current.getContext('2d');
 
     if (isDrawing) {
@@ -135,6 +138,7 @@ function Draw({ sendCanvasImage }) {
       <div
         aria-hidden
         className="connect-draw__draw-area"
+        ref={canvasWidth}
         onMouseUp={handleMouseUp}
       >
         <canvas
@@ -146,7 +150,6 @@ function Draw({ sendCanvasImage }) {
           onDragOver={handleDragHover}
           onDragExit={handleDragExit}
           height="600"
-          width="400"
         />
         <div className="connect-draw__actions">
           <Button