Canvas example

canvas.jsx

export const Canvas = () => {
  const canvas = useRef(null);
  const isDrawing = useRef(false);
  const prevMouse = useRef(null);

  const startDrawing = (event) => {
    isDrawing.current = true;
    prevMouse.current = getCoordinates(event, canvas.current);
  };

  const stopDrawing = () => {
    isDrawing.current = false;
    prevMouse.current = null;
  };

  const draw = (e: MouseEvent) => {
    if (!isDrawing.current) return;
    const context = canvas.current?.getContext('2d');
    const mouse = getCoordinates(e, canvas.current);

    if (!context || !mouse) return;

    if (prevMouse.current) {
      context.lineWidth = 2;
      context.lineCap = 'round';
      context.lineJoin = 'round';
      context.strokeStyle = '#000';
      context.beginPath();
      context.moveTo(prevMouse.current.x, prevMouse.current.y);
      context.lineTo(mouse.x, mouse.y);
      context.stroke();
    }

    prevMouse.current = mouse;
  };

  return (
    <canvas
      onMouseDown={startDrawing}
      onMouseMove={draw}
      onMouseLeave={stopDrawing}
      onMouseUp={stopDrawing}
      width={200}
      height={200}
      ref={canvas}
      className="m-auto bg-white rounded-md shadow-md"
    />
  );
};