html2canvas , unable to output inner html and div as png

Basically i’m trying to output html to png using html2canvas. A button called Download PNG will trigger an action to capture all the elements inside div class e-con-inner. However the output png is blank and unable to print inner html elements and images. i’ve tried printing throuhg div class as well as css id. When the button was kept inside div e-con-inner it did however printed the button but no inner elements.

  <button onclick="downloadAllElementsAsPNG()">DOWNLOAD PNG</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
<script>
function downloadAllElementsAsPNG() {
  const eConInner = document.querySelector('.e-con-inner');
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const scale = 2; // Increase this value for higher resolution

  canvas.width = eConInner.clientWidth * scale;
  canvas.height = eConInner.clientHeight * scale;

  const options = {
    scale: scale,
    canvas: canvas,
    logging: false,
    width: eConInner.clientWidth,
    height: eConInner.clientHeight,
    scrollY: -window.scrollY, // Capture entire content
  };

  html2canvas(eConInner, options).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = 'e-con-inner.png';
    link.click();
  });
}
</script>