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

Question

我正在尝试在画布上方绘制一个选择矩形，以指示用户选择的位置。为了实现这一点，我有一个主容器，它有一个画布和一个绝对定位的div，可根据鼠标事件进行调整。在mouseup事件中，我获得x，y，width，height，并使用这些精确坐标调用画布上的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;
}

或者您可以从画布位置偏移身体边距。