document.addEventListener("DOMContentLoaded", async function () {
  const style = document.createElement("style");
  style.textContent = "body { margin:0px; }";
  document.head.appendChild(style);

  const canvas = document.createElement("canvas");
  const maxWidth = document.documentElement.clientWidth;
  canvas.width = canvas.height = maxWidth;

  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, maxWidth, maxWidth);

  const images = Array.from(document.querySelectorAll("img")).slice(0, 4);
  for (const img of images) {
    if (!img.complete) {
      await new Promise((resolve) => (img.onload = resolve));
    }
    ctx.globalCompositeOperation = img.className;
    ctx.drawImage(img, 0, 0, maxWidth, maxWidth);
    img.style.display = "none";
  }

  document.body.appendChild(
    Object.assign(document.createElement("img"), { src: canvas.toDataURL() })
  );
});