Update App.js

src/App.js

@@ -82,70 +82,74 @@ export default function App() {
     }
 
     function handleMouseDownCanvas(e) {
-        mouseDownCanvas = true
+        if(e.button === 0) {
-        hintContext.clearRect(0, 0, 5000, 3000)
+            mouseDownCanvas = true
-        setShowTextInput(false)
+            hintContext.clearRect(0, 0, 5000, 3000)
-        context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor
+            setShowTextInput(false)
-        if (selectedTool === "pencil" || selectedTool === "eraser") {
+            context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor
-            context.beginPath()
+            if (selectedTool === "pencil" || selectedTool === "eraser") {
-            context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false)
+                context.beginPath()
-            context.fill()
+                context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false)
+                context.fill()
 
-            lastMouse = Date.now()
+                lastMouse = Date.now()
-            lastPositions.push(new Position(e.pageX, e.pageY))
+                lastPositions.push(new Position(e.pageX, e.pageY))
-        } else {
+            } else {
 
-            formAnchor = new Position(e.pageX, e.pageY)
+                formAnchor = new Position(e.pageX, e.pageY)
-        }
+            }
-        if(selectedTool === "text") {
+            if(selectedTool === "text") {
-            mouseDownCanvas = false
+                mouseDownCanvas = false
-            setTextInputX(e.pageX + 10)
+                setTextInputX(e.pageX + 10)
-            setTextInputY(e.pageY + 10)
+                setTextInputY(e.pageY + 10)
-            setShowTextInput(true)
+                setShowTextInput(true)
-            hintContext.beginPath()
+                hintContext.beginPath()
-            hintContext.fillStyle = "black"
+                hintContext.fillStyle = "black"
-            hintContext.arc(e.pageX, e.pageY, 5, 0, 2*Math.PI, false)
+                hintContext.arc(e.pageX, e.pageY, 5, 0, 2*Math.PI, false)
-            hintContext.fill()
+                hintContext.fill()
+            }
         }
     }
 
     function handleMouseUpCanvas(e) {
-        mouseDownCanvas = false
+        if(e.button === 0) {
+            mouseDownCanvas = false
 
-        if (selectedTool === "rect") {
+            if (selectedTool === "rect") {
-            context.strokeStyle = colorValue
+                context.strokeStyle = colorValue
-            context.beginPath()
+                context.beginPath()
-            context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
+                context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
-            context.lineWidth = strokeWidthSliderValue
+                context.lineWidth = strokeWidthSliderValue
-            context.stroke()
+                context.stroke()
 
-        } else if (selectedTool === "circle") {
+            } else if (selectedTool === "circle") {
-            context.strokeStyle = colorValue
+                context.strokeStyle = colorValue
-            context.beginPath()
+                context.beginPath()
-            let radius = (e.pageX - formAnchor.x) / 2
+                let radius = (e.pageX - formAnchor.x) / 2
-            let yRad = (e.pageY - formAnchor.y) / 2
+                let yRad = (e.pageY - formAnchor.y) / 2
-            context.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false)
+                context.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false)
-            context.lineWidth = strokeWidthSliderValue
+                context.lineWidth = strokeWidthSliderValue
-            context.stroke()
+                context.stroke()
-        } else if(selectedTool === "selector") {
+            } else if(selectedTool === "selector") {
-            context.fillStyle = eraserColor
+                context.fillStyle = eraserColor
-            context.fillRect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
+                context.fillRect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
-        }
+            }
-        else if(selectedTool === "line") {
+            else if(selectedTool === "line") {
-            context.strokeStyle = colorValue
+                context.strokeStyle = colorValue
-            context.beginPath()
+                context.beginPath()
-            context.lineWidth = strokeWidthSliderValue
+                context.lineWidth = strokeWidthSliderValue
-            context.moveTo(formAnchor.x, formAnchor.y)
+                context.moveTo(formAnchor.x, formAnchor.y)
-            context.lineTo(e.pageX, e.pageY)
+                context.lineTo(e.pageX, e.pageY)
-            context.stroke()
+                context.stroke()
-            context.moveTo(0, 0)
+                context.moveTo(0, 0)
-        }
+            }
 
-        if(selectedTool !== "text") {
+            if(selectedTool !== "text") {
-            hintContext.clearRect(0, 0, 5000, 3000)
+                hintContext.clearRect(0, 0, 5000, 3000)
-        }
+            }
-        else {
+            else {
-            textInput.focus()
+                textInput.focus()
+            }
         }
     }