Как я могу предотвратить потерю качества и затемнение при объединении двух холстов, которые загружают PDF-файлы в JavaScript?

let emptyPDF, emptyPDFImageData;
(async() => {
  let pdfs = ["https://i.stack.imgur.com/bvfme.png", "https://i.stack.imgur.com/x9Cam.png", "https://i.stack.imgur.com/M6V2p.png", "https://i.stack.imgur.com/YWxJF.png"];
  for (let a = 0; a < pdfs.length; a++) {
    document.getElementById("pdf" + (a + 1)).getContext("2d").drawImage(await loadImage(pdfs[a]), 0, 0)
  }

  emptyPDF = document.createElement("canvas");
  emptyPDF.width = 590
  emptyPDF.height = 180
  emptyPDF.getContext("2d").drawImage(await loadImage("https://i.stack.imgur.com/QUT3B.png"), 0, 0);
  emptyPDFImageData = emptyPDF.getContext("2d").getImageData(0, 0, emptyPDF.width, emptyPDF.height).data;



})();

function loadImage(src) {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.crossOrigin = ""
    img.onload = () => resolve(img);
    img.src = "https://api.codetabs.com/v1/proxy/?quest = " + src;
  });
}

function merge() {
  let canvas = document.getElementById(document.getElementById("sourceA").value);

  let imageDataA = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height).data;

  canvas = document.getElementById(document.getElementById("sourceB").value);
  let imageDataB = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height).data;

  let colors = new Uint8ClampedArray(new Array(emptyPDF.width * emptyPDF.height * 4).fill(255));
  let colA, colB, colC;
  for (let a = 0; a < colors.length; a += 4) {
    colA = (emptyPDFImageData[a] << 16 | emptyPDFImageData[a + 1] << 8 | emptyPDFImageData[a + 2]);
    colB = (imageDataA[a] << 16 | imageDataA[a + 1] << 8 | imageDataA[a + 2]);
    colC = (imageDataB[a] << 16 | imageDataB[a + 1] << 8 | imageDataB[a + 2]);
    if (colA != colB) {
      colors[a] = imageDataA[a];
      colors[a + 1] = imageDataA[a + 1];
      colors[a + 2] = imageDataA[a + 2];
    } else if (colC != colA) {
      colors[a] = imageDataB[a];
      colors[a + 1] = imageDataB[a + 1];
      colors[a + 2] = imageDataB[a + 2];
    } else {
      colors[a] = emptyPDFImageData[a];
      colors[a + 1] = emptyPDFImageData[a + 1];
      colors[a + 2] = emptyPDFImageData[a + 2];
    }

  }

  let imageData = new ImageData(colors, emptyPDF.width, emptyPDF.height);
  document.getElementById("result").getContext("2d").putImageData(imageData, 0, 0);
}

.container {
  display: flex;
  align-items: center;
}

canvas {
  width: 295px;
}

<div>
  <div class = "container"><canvas id = "pdf1" width = "590" height = "180"></canvas><span>PDF#1</span></div>
  <hr>
  <div class = "container"><canvas id = "pdf2" width = "590" height = "180"></canvas><span>PDF#2</span></div>
  <hr>
  <div class = "container"><canvas id = "pdf3" width = "590" height = "180"></canvas><span>PDF#3</span></div>
  <hr>
  <div class = "container"><canvas id = "pdf4" width = "590" height = "180"></canvas><span>PDF#4</span></div>
  <hr>
  <div class = "container"><canvas id = "result" width = "590" height = "180"></canvas><span>Result</span></div>
</div>
<label>Source A:</label>
<select id = "sourceA">
  <option value = "pdf1">PDF#1</option>
  <option value = "pdf2">PDF#2</option>
  <option value = "pdf3">PDF#3</option>
  <option value = "pdf4">PDF#4</option>
  <option value = "result">Result</option>
</select>
<span>+</span>
<label>Source B:</label>
<select id = "sourceB">
  <option value = "pdf1">PDF#1</option>
  <option value = "pdf2">PDF#2</option>
  <option value = "pdf3">PDF#3</option>
  <option value = "pdf4">PDF#4</option>
  <option value = "result">Result</option>
</select>
<button id = "mergeButton" onclick = "merge()">Merge</button>