我創建了一個應用程序，當用戶單擊特定位置時，我想在畫布上繪制一個矩形。然而，我面臨一個問題，矩形出現在畫布上的錯誤位置。我已經檢查了我的代碼和CSS，但是我似乎不能識別問題。

以下是我的代碼概述:

該應用程序是使用React構建的，我有一個名為TimeLineApp的組件來呈現畫布容器。 canvas元素是在TimeLineAppCanvas組件中實現的，我在其中處理click事件并使用getContext方法繪制矩形。 我還為canvas容器(#TimeLineApp)和canvas元素本身定義了CSS樣式。 然而，盡管我做了努力，矩形并沒有出現在畫布上的預期位置。我懷疑我的CSS規則或者我計算坐標的方式可能有問題。

有人能幫我找出這個問題的原因嗎？任何見解或建議將不勝感激。謝謝大家！

指向我的項目的CodeSandbox鏈接

這是我的鼠標坐標組件

import { useEffect, useState } from "react";


function MousePosition(global){
const [mouseCoords, setMouseCoords] = useState({
    x: 0,
    y: 0,
})

const handleCursorMovement = (e) => {
    let rect = e.target.getBoundingClientRect();
    setMouseCoords({
        x: ((e.clientX)- (rect.left)),
        y: (e.clientY - rect.top) 
    });
    console.log( 'Canvas',  mouseCoords.x, mouseCoords.y)
    console.log(e.target.getBoundingClientRect())
    console.log( 'Actual',  e.clientX);
};


useEffect(() => {
    if(global){
    window.addEventListener("mousemove", handleCursorMovement);
    }
    return () => {
    window.removeEventListener("mousemove", handleCursorMovement);
         };
    }, [global]);
   
return [mouseCoords, handleCursorMovement];

    }

export default MousePosition;

這是我的TimeLineAppCanvas組件

import React, {useRef, useEffect} from 'react'
import MousePosition from './MouseCoordinates';

const TimeLineAppCanvas = props => {
    const canvasRef = useRef(null);
    const [coords, handleCoords] = MousePosition(true);

    return <canvas ref={canvasRef} {...props}
    onClick={(e) => {
      handleCoords((e));
      if (canvasRef.current) {
        const ctx = canvasRef.current.getContext("2d");
        ctx.strokeStyle = "#0095DD";
        ctx?.strokeRect(coords.x, coords.y, 20, 30);
      }
    }}/>
  }

export default TimeLineAppCanvas

這是我的CSS

#TimeLineApp{
    width:75%;
    height: 50%;
    /* width: 400px;
    height: 500px; */
    background: #FFFFFF;
    margin: 0 auto;
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
    cursor: pointer;
    
}

#TimeLineApp canvas {
    width: 100%;
    height: 100%;
  }

這里是容器:

import './TimeLineApp.css'
import TimeLineAppCanvas from './Files/TimeLineAppCanvas';

function TimeLineApp() {



    return(
    <div>
        <TimeLineAppCanvas id='TimeLineApp' ></TimeLineAppCanvas>
    </div>
    )
}

export default TimeLineApp