почему изображение размыто в react-canvas-draw

Question

Я создаю приложение на React, мне нужно сделать снимок, а затем нарисовать его, я работаю для этой цели с «реагирующей веб-камерой»; Чтобы сделать фото, И для рисования на картинке, которую я использую с CanvasDraw, Моя проблема в том, что когда я переношу изображение в CanvasDraw, оно становится очень размытым, у кого-нибудь есть идеи, или, может быть, изменить библиотеки фотографии и рисования? Спасибо всем, я прилагаю соответствующий код.

      import Webcam from "react-webcam";
import CustomButton from "../custom-button/custom-button";
import Draw from '../draw/Draw'
// export  const WebcamComponent = () => <Webcam />;
export const WebcamComponent = (props) => {
    const webcamRef = useRef(null);
    const [imgSrc, setImgSrc] = useState([]);
    const [camera, setCamera] = useState(false);
    const [degObj, setDeg] = useState({});

    const capture = useCallback(() => {
        const imageSrc = webcamRef.current.getScreenshot();
        // if (props.setSrc) {
        //     props.setSrc(imageSrc) 
        // }
        setImgSrc([...imgSrc, imageSrc], props.setSrc ? props.setSrc(imgSrc) : null);
        setCamera(!camera)

    }, [webcamRef, setImgSrc, setCamera, camera, imgSrc, props]);
    let openCamera = () => {
        setCamera(!camera)
    }
    let ChangeDeg = (index) => {
        console.log(index);
        console.log("ChangeDeg", degObj);
        setDeg({ ...degObj, [index]: degObj[index] && degObj[index] === 360 ? 0 : degObj[index] ? degObj[index] + 90 : 90 })
    }
    return (
        <>
            <CustomButton onClick={openCamera}>
            Camera
            </CustomButton>
            {camera && [<Webcam
                audio={false}
                ref={webcamRef}
                width={95 + 'vw'}
                screenshotFormat="image/jpeg"
            />,
            <button onClick={capture}>Capture photo</button>]}

            {imgSrc && (imgSrc.map((srcr, index) => [
            <button key={'button' + index} onClick={() => ChangeDeg(index)}>rotated</button>,
             <Draw key={'Draw' + index} style={{ transform: `rotate(${degObj[index]}deg)` }} id={'id' + index} brushRadius={1} brushColor="red" imgSrc={srcr} />]
            )

            )}
        </>
    );
};


  // https://www.npmjs.com/package/react-webcam