render.js

const map = [
  [[1, 1, 1, 1], [2, 2, 1, 1], [1, 1, 2, 2], [2, 2, 2, 2]],
  [[3, 1, 3, 1], [4, 2, 3, 1], [3, 1, 4, 2], [4, 2, 4, 2], [5, 2, 3, 1], [3, 1, 5, 2]],
  [[1, 3, 1, 3], [2, 4, 1, 3], [1, 3, 2, 4], [2, 4, 2, 4], [2, 5, 1, 3], [1, 3, 2, 5]],
  [[3, 3, 3, 3], [4, 4, 3, 3], [3, 3, 4, 4], [4, 4, 4, 4], [4, 5, 4, 4], [5, 4, 4, 4], [5, 5, 4, 4]],
  [[4, 2, 5, 2], [5, 2, 4, 2], [5, 2, 5, 2], [4, 4, 5, 4], [4, 5, 5, 4], [5, 4, 5, 4], [5, 5, 5, 4]],
  [[2, 4, 2, 5], [2, 5, 2, 4], [2, 5, 2, 5], [4, 4, 4, 5], [4, 5, 4, 5], [5, 4, 4, 5], [5, 5, 4, 5]],
  [[5, 4, 3, 3], [4, 5, 3, 3], [5, 5, 3, 3], [4, 4, 5, 5], [4, 5, 5, 5], [5, 4, 5, 5], [5, 5, 5, 5]],
  [[3, 3, 5, 4], [3, 3, 4, 5], [3, 3, 5, 5]]
]

const render = (size, imgs, result) => {
  result.clearRect(0, 0, size * 8, size * 8);
  let half = size / 2
  for (let i = 0; i < 8; i++)
    for (let j = 0; j < 8; j++) {
      let r = map[i][j]
      if (r) {
        drawImage(result, imgs[r[0]], size * j, size * i, 0, 0, half, half)
        drawImage(result, imgs[r[1]], size * j + half, size * i, half, 0, half, half)
        drawImage(result, imgs[r[2]], size * j, size * i + half, 0, half, half, half)
        drawImage(result, imgs[r[3]], size * j + half, size * i + half, half, half, half, half)
      }
    }
}

const drawImage = (ctx, img, x, y, u, v, w, h) => {
  if (img) ctx.drawImage(img, u, v, w, h, x, y, w, h)
}