4. Canvas 다시 쓰기

<추가사항>

※clearCanvas 함수 추가 - 캔버스 초기화

 

캔버스 화면을 모두 지우고 추출한 캔버스 이미지도 삭제

  -ctx.clearRect(x, y, w, h) : 캔버스 영역을 초기화

 

page - <Canvas.js>

import React, { useEffect, useRef, useState } from "react";

function Canvas() {
  const canvasRef = useRef(null);

  const [isDrawing, setIsDrawing] = useState(false);

  const [lastX, setLastX] = useState(0);
  const [lastY, setLastY] = useState(0);

  const [outputImageSrc, setOutputImageSrc] = useState(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");

    const drawing = (e) => {
      if (!isDrawing) return;

      const rect = canvas.getBoundingClientRect();
      const offsetX = e.clientX - rect.left;
      const offsetY = e.clientY - rect.top;

      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(offsetX, offsetY);
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
      ctx.stroke();
      
      setLastX(offsetX);
      setLastY(offsetY);
    };

    canvas.addEventListener("mousemove", drawing);
    return () => {
      canvas.removeEventListener("mousemove", drawing);
    };
  }, [isDrawing, lastX, lastY]);

  const drawingCanvas = (e) => {
    setIsDrawing(true);
    const rect = e.target.getBoundingClientRect();
    setLastX(e.clientX - rect.left);
    setLastY(e.clientY - rect.top);
  };
  const stopDrawing = () => {
    setIsDrawing(false);
  };
  const canvasOut = () => {
    setIsDrawing(false);
  };

  const outputCanvasImage = () => {
    const canvas = canvasRef.current;
    setOutputImageSrc(canvas.toDataURL());
  };

  //다시 쓰기 함수
  const clearCanvas = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height); //캔버스 전체 영역을 지움
    setOutputImageSrc(null); //추출한 이미지도 삭제
  };

  return (
    <div>
      <canvas
        ref={canvasRef}
        width={500}
        height={500}
        style={{ border: "1px solid black" }}
        onMouseDown={drawingCanvas}
        onMouseUp={stopDrawing}
        onMouseOut={canvasOut}
      />
      {outputImageSrc && <img src={outputImageSrc} alt="분석된 이미지" />}
      <div>
        <button onClick={outputCanvasImage}>추출</button>
        <button onClick={clearCanvas}>다시 쓰기</button> <!--다시 쓰기 버튼-->
      </div>
    </div>
  );
}

export default Canvas;