How to export a map to fullscreen way (using OpenLayer)?

Question

I have the following code and It works perfectly:

  <style>
    .map {
      width: 100%;
      height: 350px;
    }
  </style>

  <div id="map" class="map"></div>

  /* Export map to PNG Format */
  var exportPNGElement = document.getElementById('pngFormat');

  if ('download' in exportPNGElement) {
    exportPNGElement.addEventListener('click', function(e) {
      map.once('postcompose', function(event) {
        var canvas = event.context.canvas;
        exportPNGElement.href = canvas.toDataURL('image/png');
      });
      map.renderSync();
    }, false);
  } else {
    var info = document.getElementById('no-download');
    /**
     * display error message
     */
    info.style.display = '';
  }

But now, I'd like to export all this to fullscreen way.

I've tried to insert the following code but It doesn't work.

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

Also, I've tried to resize the div map but without sucessful.

var maptoEdit = document.getElementById('map').innerHTML = "<div style='height:100%; width:100%'></div>";

Answer 1

UPDATE:

Finally, I can do it the next way:

//document.getElementById('map').style.width = $(window).width() + 'px'; // Returns width of browser viewport
//document.getElementById('map').style.height= $(window).height() + 'px'; // Returns height of browser viewport  
document.getElementById('map').style.width = '1280px'; 
document.getElementById('map').style.height = '768px'; 
map.updateSize();