Как я могу загрузить массив изображений в html5 canvas и поменять одно из изображений на нажатие кнопки

Question

Я пытаюсь построить велосипедный конфигуратор. Это моя проблема.

Как я могу загрузить и массив изображений для создания велосипеда и другого массива с деталями справа, из которого, когда пользователь нажимает, я беру деталь и загружаю ее слева, где находится велосипед, без предварительной загрузки всего холста снова. новое изображение будет той же ширины и высоты и должно быть в той же позиции х / у. Вот так я загружаю и массив изображений, но потом я не знаю, как их поменять. Я знаю, что не могу очистить изображение, загруженное на холст, и мне приходится рисовать новое сверху, но я не знаю, как.

<script type="text/javascript" charset="utf-8">
function loadImages(sources, callback){
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for (var src in sources) {
      numImages++;
    }
    for (var src in sources) {
      images[src] = new Image();
      images[src].onload = function(){
        if (++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

window.onload = function(images){
  var canvas = document.getElementById("config");
  var context = canvas.getContext("2d");

  var sources = {
      one: "one.jpg",
      two: "two.jpg"
  };

  loadImages(sources, function(images){
      context.drawImage(images.one, 100, 100, 180, 200);
      context.drawImage(images.two, 280, 100, 180, 200);
      });
};
</script>

Как я могу изменить изображение two.jpg по нажатию кнопки. Кнопка должна быть за пределами холста.

Answer 1

button.addEventListener('click', function () {
  canvas.width = canvas.width; // redraws canvas
  sources.two = 'three.jpg';

  // fyi, you are drawing the images as many times as there are sources.
  loadImages(sources, function(images){
      context.drawImage(images.one, 100, 100, 180, 200);
      context.drawImage(images.two, 280, 100, 180, 200);
   });
}, false);