I would like to set an option for exporting my OpenLayers map as the .png file.

I used this example:

https://openlayers.org/en/master/examples/export-map.html

from where I retrieved all relevant coding and links.

My situation looks like this:

HTML

   <button type="button" class="saveBtn"><a id="export-png" class="btn btn-default"><i 
   class="fa fa-download"></i> Download PNG</a>
   <a id="image-download" download="map.png"></a></button>

JS

 document.getElementById('export-png').addEventListener('click', function () {
  map.once('rendercomplete', function () {
   var mapCanvas = document.createElement('canvas');
   //var img = new Image();
   //img.crossOrigin = "anonymous";
    var size = map.getSize();
    mapCanvas.width = size[0];
    mapCanvas.height = size[1];
    var mapContext = mapCanvas.getContext('2d');
    Array.prototype.forEach.call(
    document.querySelectorAll('.ol-layer canvas'),
    function (canvas) {
    if (canvas.width > 0) {
      var opacity = canvas.parentNode.style.opacity;
      mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
      var transform = canvas.style.transform;
      // Get the transform parameters from the style's transform matrix
      var matrix = transform
        .match(/^matrix\(([^\(]*)\)$/)[1]
        .split(',')
        .map(Number);
      // Apply the transform to the export map context
      CanvasRenderingContext2D.prototype.setTransform.apply(
        mapContext,
        matrix
        );
        mapContext.drawImage(canvas, 0, 0);
      }
    }
   );
   if (navigator.msSaveBlob) {
    // link download attribuute does not work on MS browsers
    navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
  } else {
  var link = document.getElementById('image-download');
  link.href = mapCanvas.toDataURL();
  link.click();
   }
  });
  map.renderSync();
 });

The console says nothing. There is no reaction after clicking the button. What is missing here?

See my full situation here:

https://mlearnweb.online/