I'm implementing a chrome extension with javascript to take a screenshot of a full page, so far I've managed to take the screenshot and make it into a canvas in a new tab, it shows the content of a tweet perfectly, but as you can see, the sidebars repeat all the time (Ignore the red button, that's part of my extension and I know how to delete it from the screenshots) screenshot of a tweet

This is the code I'm using to take the screenshot:

async function capture(){
  navigator.mediaDevices.getDisplayMedia({preferCurrentTab:true}).then(mediaStream=>{
    scrollTo(0,0);
    var defaultOverflow = document.body.style.overflow;
    //document.body.style.overflow = 'hidden';
    var totalHeight = document.body.scrollHeight;
    var actualHeight = document.documentElement.clientHeight;
    var leftHeight = totalHeight-actualHeight;
    var scroll = 200;
    var blob = new Blob([document.documentElement.innerHTML],{ type: "text/plain;charset=utf-8" });
    console.log('total Height:'+totalHeight+'client height:'+actualHeight+'Left Height:'+leftHeight);
    var numScreenshots = Math.ceil(leftHeight/scroll);
    var arrayImg = new Array();
    var i = 0;                  
    function myLoop() {         
      setTimeout(function() {   
        var track = mediaStream.getVideoTracks()[0];
        let imgCapture = new ImageCapture(track);
        imgCapture.grabFrame().then(bitmap=>{
          arrayImg[i] = bitmap;
          window.scrollBy(0,scroll);
          console.log(i);
          i++;
        });                  
        if (i <= numScreenshots) {           
          myLoop();              
        }else{
          document.body.style.overflow = defaultOverflow;
          saveAs(blob, "static.txt");
          printBitMaps(arrayImg, numScreenshots, totalHeight);
        }                       
      }, 250)
    }
    myLoop();
  })
}
async function printBitMaps(arrayImg, numScreenshots, totalHeight){
  var win = window.open('about:blank', '_blank');
  win.document.write('<canvas id="myCanvas" width="'+arrayImg[0].width+'px" height="'+totalHeight+'px" style="border:5px solid #000000;"></canvas>');
  var e = numScreenshots+1;
  function printToCanvas(){
    setTimeout(function(){
      var canvas = win.document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.drawImage(arrayImg[e], 0, 200*e);
      e--;
      if(e>=0){
        printToCanvas();
      }
    },10);

  }
  printToCanvas();
}

Do you know any way by CSS or javascript that I can use to make the sidebars stay at the top of the page so they don't keep coming down with the scroll?