get painting, of canvas in react

Question

hello I build a drawing app with react and I want to receive what the user has drawn when the user Mouse Up from the canvas . and I want this happen again and again, until user has stopped drawing. what thing do you suggest to me for solve this problem . thanks for your help I used mousechange but I figured out its doesn't work on canvas. Drawing Section :

import { useEffect, useRef, useState } from "react";
import Menu from "./Menu";
import "./App.css";
import { useStateContext } from '../../contexts/ContextProvider';



const DrawingSEC = () => {

    const canvasRef = useRef(null);
    const ctxRef = useRef(null);
    const [isDrawing, setIsDrawing] = useState(false);
    const [lineWidth, setLineWidth] = useState(2);
    const [lineColor, setLineColor] = useState("black");
    const {screenSize,
      setScreenSize} = useStateContext();
  
    useEffect(() => {
      const handleResize = () => setScreenSize
        (window.innerWidth);
      window.addEventListener('resize', handleResize);
  
      handleResize();
      return () => window.removeEventListener
        ('resize', handleResize);
    });
    
    // Initialization when the component
    // mounts for the first time
    useEffect(() => {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext("2d");
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.strokeStyle = lineColor;
      ctx.lineWidth = lineWidth;
      ctxRef.current = ctx;
    }, [lineColor,  lineWidth]);
    
    // Function for starting the drawing
    const startDrawing = (e) => {
      ctxRef.current.beginPath();
      ctxRef.current.moveTo(
        e.nativeEvent.offsetX, 
        e.nativeEvent.offsetY
      );
      setIsDrawing(true);
    };
    
    // Function for ending the drawing
    const endDrawing = () => {
      ctxRef.current.closePath();
      
      setIsDrawing(false);
    };
    
    const draw = (e) => {
      if (!isDrawing) {
        return;
      }
      ctxRef.current.lineTo(
        e.nativeEvent.offsetX, 
        e.nativeEvent.offsetY
      );
        
      ctxRef.current.stroke();
    };
  return (
    <div className="App">
      <div className="draw-area">
        <Menu
          setLineColor={setLineColor}
          setLineWidth={setLineWidth}
          lineWidth={lineWidth}

        />
        <canvas
          onMouseDown={startDrawing}
          onMouseUp={endDrawing}
          onMouseMove={draw}
          ref={canvasRef}
          width={screenSize-300}
          height={`720px`}
        />
      </div>
    </div>
  )
}

export default DrawingSEC

Menu is DrawSec :

import React from "react";
import "./App.css";

const Menu = ({ setLineColor, setLineWidth,lineWidth }) => {
return (
    <div className="Menu">
    <label>color  </label>
    <input
        type="color"
        onChange={(e) => {
        setLineColor(e.target.value);
        }}
        style={{borderRadius:"50%"}}
    />
    <label>linewidth </label>
    <input
        type="range"
        min="3"
        max="20"
        value={lineWidth}
        onChange={(e) => {
        setLineWidth(e.target.value);
        }}
    />
    
    </div>
);
};

export default Menu;

App.css :

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

.App {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

h1 {
  font-family: "Lobster", cursive;
  font-size: 50px;
  color: #4644f0;
}

.draw-area {
  height: 720px;
  border: 2px solid #808080;
  position: relative;
  background-color: white;
}
.draw-area canvas {
  /* width: 100%; */
}

.Menu {
  width: 650px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  border-radius: 5px;
  align-items: center;
  background-color: #a3a3a32d;
  margin: auto;
  margin-top: 10px;
  /* width: 100%; */
  /* display: flex; */
  /* flex-wrap: wrap; */
}

I want when user Mouse Up from canvas , canvas converted to image and sent somewhere.

Answer 1

you should add this line into your endDrawing Func:

      console.log(canvasRef.current.toDataURL());

this is give you a link in console, and you can save it in another varriable.