Why I need to press DRAW button two times to get Canvas and base64 formatted image-CodePudding

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        padding: 10px 50px;
        cursor: pointer;
      }
      .custom {
        width: 200px;
        height: 200px;
      }
      .canvas-container {
        border: 5px solid #000;
        margin-bottom: 10px;
        margin-top: 10px;
      }
    </style>
    <script>
      const draw = () => {
        const availableImages = [1, 2];
        let canvas = document.querySelector("#screenShotCanvas");
        var context = canvas.getContext("2d");
        let image = document.querySelector("#cnimg");
        canvas.width = availableImages.length * 700;
        canvas.height = 450;
        var promises = availableImages.map((img, index) => {
          var imageEl = document.getElementById(`img${index   1}`);
          imageEl.setAttribute("crossOrigin", "anonymous");
          imageEl.height = 450;
          imageEl.width = 700;
          context.drawImage(imageEl, index * 700, 0, 700, 450);
          return img;
        });

        Promise.all(promises)
          .then(() => {
            var canvasImg = canvas.toDataURL();
            console.log("