drawing basics

ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts

@@ -11,6 +11,7 @@ globalStyle(`${DrawImageMain} > canvas`, {
   position: "absolute",
   top: "0",
   left: "0",
+  opacity: "0.5",
 });
 
 globalStyle(`${DrawImageMain} > img`, {

ui/frontend/build_src/src/components/molecules/drawImage/index.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useState } from "react";
 
 // https://github.com/embiem/react-canvas-draw
 
@@ -15,77 +15,70 @@ import {
 export default function DrawImage({ imageData }: DrawImageProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
-  const draw = (ctx: CanvasRenderingContext2D) => {
+  const [isDrawing, setIsDrawing] = useState(false);
-    ctx.fillStyle = "red";
-    ctx.fillRect(0, 0, 100, 100);
-  };
-
-  // useEffect(() => {
-  //   const canvas = canvasRef.current;
-  //   if (canvas) {
-  //     if (imageData) {
-  //       const ctx = canvas.getContext("2d");
-  //       if (ctx) {
-  //         const img = new Image();
-  //         img.onload = () => {
-  //           ctx.drawImage(img, 0, 0);
-  //         };
-  //         img.src = imageData;
-  //       }
-  //     } else {
-  //       const ctx = canvas.getContext("2d");
-  //       if (ctx) {
-  //         draw(ctx);
-  //       }
-  //     }
-  //   } else {
-  //     console.log("canvas is null");
-  //   }
-  // }, [imageData, draw]);
 
   const _handleMouseDown = (
     e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
   ) => {
     console.log("mouse down", e);
-    const canvas = canvasRef.current;
-    if (canvas) {
-      const ctx = canvas.getContext("2d");
-      ctx.strokeStyle = "#red";
-      const {
-        nativeEvent: { offsetX, offsetY },
-      } = e;
 
-      // console.log("x: " + x + " y: " + y);
+    const {
-      ctx.beginPath();
+      nativeEvent: { offsetX, offsetY },
-      ctx.moveTo(offsetX, offsetY);
+    } = e;
-      // ctx.lineTo(x + 1, y + 1);
+
-      // ctx.stroke();
+
-    }
+    setIsDrawing(true);
   };
 
   const _handleMouseUp = (
     e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
   ) => {
-    console.log("mouse up");
+    setIsDrawing(false);
+
     const canvas = canvasRef.current;
     if (canvas) {
-      const ctx = canvas.getContext("2d");
+      const data = canvas.toDataURL();
-      if (ctx) {
+      console.log("data", data);
-        // draw(ctx);
-      }
-      const {
-        nativeEvent: { offsetX, offsetY },
-      } = e;
-
-      // console.log("x: " + x + " y: " + y);
-
-      // ctx.moveTo(x, y);
-      ctx?.lineTo(offsetX, offsetY);
-      ctx.stroke();
-      ctx.closePath();
     }
   };
 
+  const _handleMouseMove = (
+    e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
+  ) => {
+
+    if (isDrawing) {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        const ctx = canvas.getContext("2d");
+        ctx.strokeStyle = "red";
+        const {
+          nativeEvent: { offsetX, offsetY },
+        } = e;
+
+        ctx.beginPath();
+
+        ctx.lineWidth = 20;
+
+        // Sets the end of the lines drawn
+        // to a round shape.
+        ctx.lineCap = 'round';
+
+        ctx.strokeStyle = 'white';
+        // The cursor to start drawing
+        // moves to this coordinate
+        ctx.moveTo(offsetX, offsetY);
+
+        // A line is traced from start
+        // coordinate to this coordinate
+        ctx.lineTo(offsetX, offsetY);
+
+        // Draws the line.
+        ctx.stroke();
+      }
+    }
+
+  };
+
   return (
     <div className={DrawImageMain}>
       <img src={imageData} />
@@ -94,6 +87,7 @@ export default function DrawImage({ imageData }: DrawImageProps) {
         width={512}
         height={512}
         onMouseDown={_handleMouseDown}
+        onMouseMove={_handleMouseMove}
         onMouseUp={_handleMouseUp}
       ></canvas>
     </div>