在画布上两点之间绘制矩形答案

【问题标题】：draw rectangle on canvas between 2 points在画布上两点之间绘制矩形
【发布时间】：2021-04-02 03:06:42
【问题描述】：

我是 javascript 新手，正在尝试学习如何在画布上绘图。任务是在画布上的 2 个单击点之间绘制一个矩形。

let rectangle = 0;

window.addEventListener("load", () => {
  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");
  let x;
  let y;
  canvas.addEventListener("click", (e) => {
    if (rectangle === 0) {
      x = e.clientX;
      y = e.clientY;
      ++rectangle;
    } else {
      xprim = e.clientX;
      yprim = e.clientY;

      context.beginPath();
      context.fillRect(x, y, xprim - x, yprim - y);
      context.stroke();
      rectangle = 0;
    }
  })
})

.canvas_for_rectangle{
    border: 1px solid black;
    height: 50%;
    width: 50%;
}

&lt;canvas id="myCanvas" class="canvas_for_rectangle"&gt;

画布上什么都没有显示，我不知道什么是不正确的，因为我对这门语言非常陌生。我做错了什么，我需要研究什么？

【问题讨论】：

为我工作。您是否在画布区域内单击？（另外，请注意，事件鼠标坐标是相对于页面视图区域，而画布坐标是相对于画布区域。）
我在画布上单击，我在 if-else 中也有一些 console.log(s) 并打印出它进入了它们。我不知道这里做错了什么。

标签： javascript canvas

【解决方案1】：

你需要把画布变大吗？如果我没记错的话，它的默认大小只有 300x150，所以你可能只是在该区域之外绘制。你用 CSS 给它的大小与绘图无关。我现在会删除您的 CSS 并执行以下操作：

canvas.width = window.innerWidth
canvas.height = window.innerHeight

【讨论】：

确实做了一些事情。现在矩形出现在我的画布上，但离我点击的点很远。在用 HTML 声明画布之前，我还有其他 HTML 元素，这有关系吗？
酷！是的，e.clientX/Y 是相对于整个窗口的坐标。你想要相对于画布的坐标，即e.offsetX/Y
是的。所以有一些问题导致我什么都看不到： 1. 画布太小； 2.坐标与画布无关。谢谢，您的提示解决了我的问题，我对 Javascript 的仇恨正在慢慢减少！