Unable to display 2d isometric tiles correctly


I'm facing a problem while displaying my tiles with both html canvas and javascript.

I'm wondering me why the tiles are not at the same level... My code:

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);
    }
  }
}

This is plugged to an html div with id "content". Thanks.

enter image description here Related to Drawing Isometric game worlds

EDIT: Now the problem looks like this:

enter image description here

How can I manage to do a full square?


Answers: