Making a screenshot from QGIS2web Openlayers map

I would like to make a screenshot from my Openlayers map

My code so far looks like this:

    <div id="map">
    <div id="screenshot">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
    </div>
     </div>


     <script>
      function makeScreenshot() {
      html2canvas(document.getElementById("screenshot"), {scale: 2}).then(canvas => {
     canvas.id = "map";
     canvas.crossOrigin = 'anonymous';
     var main = document.getElementById("map");
     while (main.firstChild) {
      main.removeChild(main.firstChild); 
     }
    console.log(main);
    main.appendChild(canvas);
   });
   }

   document.getElementById("a-make").addEventListener('click', function()
   {
   document.getElementById("a-make").style.display = "none";
   makeScreenshot();
   document.getElementById("a-download").style.display = "inline";
  }, false);

  document.getElementById("a-download").addEventListener('click', function()
  {
  this.href = document.getElementById("map").querySelector('canvas').toDataURL();

  this.download = "canvas-image.png";
  }, false);
       </script>

The map comes from qgis2web.js file.

The console says nothing, but the map is completely blank when clicked at: generate screenshot button.

Why can’t I grab the Qgis2web map content in section properly?