javascript - html Canvas 位置出现问题

我尝试将canvas恰好覆盖在256px x 256px图像（8x8网格）的顶部，并绘制一个8x8黑色正方形-

    var canvas = document.querySelector("canvas");
    canvas.width = 1024;
    canvas.height = 1024;
    var c = canvas.getContext("2d");
    c.fillRect(0, 0, 8, 8);

    #wrapper {
      margin: 0 auto;
      width: 256px;
    }

    #img {
      position: relative;
      top: 0;
      left: 0;
    }

    #canvas {
      position: relative;
      margin-top: 0;
      margin-left: 0;
      top: -256px;
      left: 0;
      z-index: 1;
    }

    <html>
      <body>
        <div id="wrapper">
          <img id="img" src="https://i.imgur.com/0qjIa89.png" />
          <canvas id="canvas"></canvas>
        </div>
      </body>
    </html>

但是，我不明白为什么绘制的黑色正方形相对于网格图像稍微向下偏移-

完整的jsfiddle https://jsfiddle.net/ze8ufqcv/7/

如何将画布图形精确定位在图像的顶部？

最佳答案

添加显示：块；到#img选择器。

像这样。

#img {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}