在 html canvas 上制作矩形 點擊

Question

我想在事件“點擊”時在 canvas 上制作矩形。 我已經制作了事件偵聽器，但是當我單擊矩形時似乎是我單擊的區域。 基本上我希望矩形出現在點擊區域周圍。 這是我的代碼：

 const cursor_pdf = document.getElementsByClassName('react-pdf__Page__canvas')[0];
 cursor_pdf?.addEventListener('click', (e) => {

    const rect = cursor_pdf.getBoundingClientRect();

    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const marker = cursor_pdf.getContext("2d");
    marker.beginPath();
    marker.lineWidth = "3";
    marker.strokeStyle = "red";
    marker.rect(x, y, 50, 50);
    marker.stroke();
});

在此之后，當我在這個藍點上點擊 cursor 時（不是真的在屏幕上只是為了點鼠標點擊）矩形出現在點擊的地方。

但我希望它是這樣的：

Answer 1

 const cursor_pdf = document.getElementsByClassName('react-pdf__Page__canvas')[0]; cursor_pdf?.addEventListener('click', (e) => { const rect = cursor_pdf.getBoundingClientRect(); //subtract half of the rectangle width/height so it's centered const x = e.clientX - rect.left - 25; const y = e.clientY - rect.top - 25; const marker = cursor_pdf.getContext("2d"); marker.beginPath(); marker.lineWidth = "3"; marker.strokeStyle = "red"; marker.rect(x, y, 50, 50); marker.stroke(); });

 canvas { border: 3px solid #000; }

 <canvas class="react-pdf__Page__canvas"></canvas>