Javascript -单击图库中的图像时使用图像填充画布

<canvas id="canvas"></canvas>
<div id="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 其他图像 -->
</div>

const canvas = document.getElementById('canvas');
const gallery = document.getElementById('gallery');
const images = gallery.getElementsByTagName('img');

for (let i = 0; i < images.length; i++) {
  images[i].addEventListener('click', function() {
    fillCanvas(this.src);
  });
}

function fillCanvas(imageUrl) {
  const context = canvas.getContext('2d');
  const image = new Image();

  image.onload = function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
  };

  image.src = imageUrl;
}