在画布上方绘制选区时的偏移

Question

我正在尝试在画布上方绘制一个选择矩形，以指示用户选择的位置。为了实现这一点，我有一个主容器，它有一个画布和一个根据鼠标事件进行调整的绝对定位的 div。在mouseup 事件中，我得到x、y、宽度、高度，并使用这些精确坐标在画布上调用fillRect()。问题是画布上的矩形上下移动了几个像素。这可能是我的 css 的问题吗？

Here is a fiddle

<div id="canvasContainer">

   <canvas width="300" height="300" id="surface"></canvas>

   <div id="selectionRect">
        <span id="select"></span>
   </div>

  <div class="selectionOutline">
        <span></span>
   </div>

</div>

Answer 1

偏移量是正文的边距。在 CSS 页面上添加：

body {
  margin:0px;
}

或者你可以从画布位置偏移body margin距离。