index.js

const imageObjects = [null, null, null, null, null, null];
window.onload = _ => {
  const canvas = document.getElementById('mainCanvas');
  const canvasContainer = document.querySelector('.canvas-container');

  for (let i = 1; i <= 5; i++) {
    const imageBox = document.getElementById(`imageBox${i}`);
    const fileInput = document.getElementById(`fileInput${i}`);

    imageBox.addEventListener('click', () => {
      fileInput.click();
    });

    fileInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          const uploadText = imageBox.querySelector('.upload-text');
          if (uploadText) imageBox.removeChild(uploadText);
          const existingImg = imageBox.querySelector('img');
          if (existingImg) imageBox.removeChild(existingImg);

          const img = new Image();
          img.src = event.target.result;
          img.crossOrigin = 'anonymous';

          img.onload = () => {
            imageBox.appendChild(img);
            imageObjects[i] = img;
            let width = imageObjects[1] ? imageObjects[1].naturalWidth : 0
            canvas.width = canvas.height = width * 8
            render(width, imageObjects, canvas.getContext('2d'));
          };
        };
        reader.readAsDataURL(file);
      }
    });
  }

  const resizeCanvas = _ => {
    const rect = canvasContainer.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    canvas.style.width = `${rect.width}px`;
    canvas.style.height = `${rect.height}px`;
    const ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);
  }

  const downloadCanvas = _ => {
    let filename = Date.now() + '.png'
    let imgdata = canvas.toDataURL()
    let link = document.createElement('a')
    link.href = imgdata
    link.download = filename
    let event = document.createEvent('MouseEvents')
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    link.dispatchEvent(event)
  }

  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
  canvas.addEventListener('click', downloadCanvas)
}