Drawing a tile grid with HTML5 canvas

Question

I made this little thing to draw a tilemap using snippets from MDN (https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps), but when I run it the canvas is just blank.

Here's the code:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var map = {
  cols: 8,
  rows: 8,
  tsize: 64,
  tiles: [
    1, 3, 3, 3, 1, 1, 3, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1
  ],
  getTile: function(col, row) {
    return this.tiles[row * map.cols + col];
  }
};

console.log("drawing tilemap");

draw_map();

function draw_map() {
  console.log("hey its working!");


  for (let column = 0; column < map.columns; column++) {
    for (let row = 0; row < map.rows; row++) {
      console.log("its tiling time");
      const tile = map.getTile(column, row);
      const x = column * map.tileSize;
      const y = row * map.tileSize;
      drawTile(tile, x, y);
    }
  }
}

function drawTile(tile, X, Y) {
  print("picking color");
  if (tile === 1) {
    ctx.fillStyle = "#00ff44";
  }
  if (tile === 2) {
    ctx.fillStyle = "#fffd94";
  }
  if (tile === 3) {
    ctx.fillStyle = "#78877d";
  }
  ctx.fillRect(X, Y, map.tileSize, map.tileSize);
}

<canvas id="myCanvas" width="512" height="512" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

I tried to make it so that it would draw a 64px square tile on the canvas, with different colors depending on which value of the array it is.

Answer 1

You just have a couple of typos. I annotated and fixed the code:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var map = {
  cols: 8,
  rows: 8,
  tsize: 64,
  tiles: [
    1, 3, 3, 3, 1, 1, 3, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1
  ],
  getTile: function(col, row) {
    return this.tiles[row * map.cols + col];
  }
};

console.log("drawing tilemap");

draw_map();

function draw_map() {
  console.log("hey its working!");


  for (let column = 0; column < map.cols; column++) {
                                 // ^^^ it's 'cols', not 'columns'
    for (let row = 0; row < map.rows; row++) {
      console.log("its tiling time");
      const tile = map.getTile(column, row);
      const x = column * map.tsize; // <- 'tsize', not 'tileSize'
      const y = row * map.tsize;    // <-
      drawTile(tile, x, y);
    }
  }
}

function drawTile(tile, X, Y) {
  console.log("picking color"); // 'console.log', not 'print'
  if (tile === 1) {
    ctx.fillStyle = "#00ff44";
  }
  if (tile === 2) {
    ctx.fillStyle = "#fffd94";
  }
  if (tile === 3) {
    ctx.fillStyle = "#78877d";
  }
  ctx.fillRect(X, Y, map.tsize, map.tsize); // again, 'tsize'
}

<canvas id="myCanvas" width="512" height="512" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>