Removed twojs as I wasnt really using it anyway

package.json

@@ -22,7 +22,6 @@
     "simplebar-react": "^2.1.0",
     "socket.io-client": "^2.3.0",
     "theme-ui": "^0.3.1",
-    "two.js": "^0.7.0-stable.1",
     "webrtc-adapter": "^7.5.1"
   },
   "scripts": {

src/components/MapDrawing.js

@@ -1,30 +1,10 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
-import Two from "two.js";
 
 function MapDrawing({ width, height }) {
-  const twoRef = useRef(new Two({ type: Two.Types.canvas }));
+  const canvasRef = useRef();
   const containerRef = useRef();
 
-  useEffect(() => {
+  const [shapes, setShapes] = useState([]);
-    const two = twoRef.current;
-    const container = containerRef.current;
-    if (two && container) {
-      two.width = width;
-      two.height = height;
-      two.update();
-      // Force the canvas to be 100% after update
-      const canvas = container.firstChild;
-      if (canvas) {
-        canvas.style.width = "100%";
-        canvas.style.height = "100%";
-      }
-    }
-  }, [width, height]);
-
-  useEffect(() => {
-    const two = twoRef.current;
-    two.appendTo(containerRef.current);
-  }, []);
 
   function getMousePosition(event) {
     const container = containerRef.current;
@@ -32,42 +12,51 @@ function MapDrawing({ width, height }) {
       const containerRect = container.getBoundingClientRect();
       const x = (event.clientX - containerRect.x) / containerRect.width;
       const y = (event.clientY - containerRect.y) / containerRect.height;
-      let v = new Two.Vector(x * width, y * height);
+      return { x: x * width, y: y * height };
-      v.position = new Two.Vector().copy(v);
-      return v;
     }
   }
 
-  const mouseDownRef = useRef(false);
+  const [isMouseDown, setIsMouseDown] = useState(false);
-  const shapeRef = useRef();
   function handleMouseDown(event) {
-    const two = twoRef.current;
+    setIsMouseDown(true);
-    if (two) {
+    const position = getMousePosition(event);
-      mouseDownRef.current = true;
+    setShapes((prevShapes) => [...prevShapes, { points: [position] }]);
-      let position = getMousePosition(event);
-      let shape = two.makePath([position], false);
-      shape.fill = "#333";
-      shape.stroke = "#333";
-      shape.linewidth = 5;
-      shape.vertices[0].addSelf(shape.translation);
-      shape.translation.clear();
-      shapeRef.current = shape;
-    }
   }
 
   function handleMouseMove(event) {
-    const shape = shapeRef.current;
+    if (isMouseDown) {
-    const two = twoRef.current;
+      const position = getMousePosition(event);
-    if (mouseDownRef.current && shape && two) {
+      setShapes((prevShapes) => {
-      shape.vertices.push(getMousePosition(event));
+        const currentShape = prevShapes.slice(-1)[0];
-      two.render();
+        const otherShapes = prevShapes.slice(0, -1);
+        return [...otherShapes, { points: [...currentShape.points, position] }];
+      });
     }
   }
 
   function handleMouseUp(event) {
-    mouseDownRef.current = false;
+    setIsMouseDown(false);
   }
 
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const context = canvas.getContext("2d");
+
+      context.clearRect(0, 0, width, height);
+      for (let shape of shapes) {
+        context.beginPath();
+        context.moveTo(shape.points[0].x, shape.points[0].y);
+        for (let point of shape.points.slice(1)) {
+          context.lineTo(point.x, point.y);
+        }
+        context.closePath();
+        context.stroke();
+        context.fill();
+      }
+    }
+  }, [shapes, width, height]);
+
   return (
     <div
       style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
@@ -75,7 +64,14 @@ function MapDrawing({ width, height }) {
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
-    />
+    >
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        style={{ width: "100%", height: "100%" }}
+      />
+    </div>
   );
 }
 

yarn.lock

@@ -10770,11 +10770,6 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
-two.js@^0.7.0-stable.1:
-  version "0.7.0-stable.1"
-  resolved "https://registry.yarnpkg.com/two.js/-/two.js-0.7.0-stable.1.tgz#4999070a566c3ab1b2ba980134d0d786b46ce2db"
-  integrity sha512-4QULPtstGEyGbhMvVvCGxgm85Un6CMYqFYafw7hNan9LdqoYZqMnxsaj8pkfBT4zpRfqB98aZjGrWYoCBqKtXA==
-
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"