Save Openlayers map as PDF (offline version)

I would like to save my openlayers map as PDF.

Unfortunately all the options I tried don't work.

The first option, I guess the easiest one was here:

https://jsfiddle.net/Ljnya5gp/1/

from which I developed something like this:

 function createPdf() {

 var doc = new jsPDF();

 source = $('#map')[0];

 specialElementHandlers = {
    '#map': function (element, renderer) {
        return true
    }
  };

 doc.fromHTML(
  source,
 15,
 15, 
 {
  'width': 170,
  'elementHandlers': specialElementHandlers
 }
   );
     doc.save('Area 5 map - alterations.pdf')

but the script downloads only blank document for me.

I want to have this section downloaded (from index.html)

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

Why the output PDF document is blank? Is it caused by Map script, which is embedded into the HTML file?

My <div id="map"> refers to the script attached to the HTML file as the:

The jsfiddle can be found here:

https://jsfiddle.net/rjetdvyo/

Is it something which causes the problem too?

UPDATE:

Based on the answer below I formed something like this:

function createPdf() {

var mapElement = $("#map");

html2canvas(mapElement, {
    useCORS: true,
    onrendered: function (canvas) {
        var img = canvas.toDataURL("image/jpeg,1.0");
        var pdf = new jsPDF();
        pdf.addImage(img, 'JPEG', 15, 40, 180, 180);
        pdf.save('a4.pdf')
    }
});
  }

 var map = (document.getElementById('map'), createPdf);

The printpdf button only refreshes the page.

from Save Openlayers map as PDF (offline version)