Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest how I can achieve this? Thank you in advance for your assistance!
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 Section :
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 {
}
.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;
}
I would like the canvas to be converted into an image and sent somewhere whenever the user releases the mouse button on the canvas.