无法正确显示2d等距瓷砖

Question

我在使用html canvas和javascript显示我的图块时遇到问题。

我想知道为什么瓷砖不在同一级别......我的代码：

var map = [
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
  ];

var canvas = document.createElement("canvas");
canvas.setAttribute('width', '768px');
canvas.setAttribute('height', '768px');
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'https://opengameart.org/sites/default/files/basic_ground_tiles.png';
document.getElementById("content").appendChild(canvas);
var tile_width = 128;
var tile_height = 128;

img.onload = function() {
  for (i = 0; i < map.length; i++){
    for (j = map[i].length; j >= 0; j--){
      var x = (j * tile_width / 2) + (i * tile_width / 2);
      var y = (i * tile_height / 2) - (j * tile_height / 2);
      ctx.drawImage(img, 0, 0, 128, 128, x, y, 128, 128);
    }
  }
}

这是插入id为“content”的html div。 感谢。

相关 Drawing Isometric game worlds

编辑： 现在问题看起来像这样：

如何设法制作完整的方格？