ソースコード

const loadImages = function(images, callback) {
  let count = 0;
  const loadedImages = {};
  const keys = Object.keys(images);
  keys.forEach(function(key) {
    loadedImages[key] = new Image();
    loadedImages[key].onload = function() {
      if(++count >= keys.length) {
        callback(loadedImages);
      }
    };
    loadedImages[key].src = images[key];
  });
}

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const images = {
  mapchip: "array-map.png",
  character: "pipo-charachip022.png"
};

loadImages(images, function(images) {
  for (var y = 0; y < 10; y++) {
    for (var x = 0; x < 10; x++) {
      context.drawImage(images.mapchip, 40, 0, 40, 40, x * 32, y * 32, 32, 32);
    }
  }
  context.drawImage(images.character, 0, 0, 32, 32, 96, 96, 32, 32);
});