canvas.toDataURL () не возвращает полное изображение - оно обрезает верх

Question

I am using canvas2html to convert one of my sections:


 <div className="plan-businessInfo" id="businessInfo-main">
          .
          .
          .
     //SOME JSX//
        </div>

в строку base64. Вот метод, который я использую:

const onExportClick = e => {
    e.preventDefault();
    const businessInfo = document.getElementById("businessInfo-main");
    html2canvas(businessInfo).then(canvas => {
      const imgData = canvas.toDataURL();
      const doc = new jsPDF("p", "mm", "a4");
      console.log(imgData); // GETTING IMAGE string

      // GETTING PDF PAGE SIZE
      const widthPDF = doc.internal.pageSize.getWidth();
      const heightPDF = doc.internal.pageSize.getHeight();

        //ADDDING IMAGE WITH SIZE ON THE PDF PAGE
        doc.addImage(
          imgData,
          "png",
          0,
          0,
          widthPDF /**width */,
          heightPDF /**heigth */
        );


      doc.save("abc.pdf");
    });
  };

Проблема в том, что изображение в PDF выглядит ужасно, а также строка base64 не полная.

1. Вот как выглядит раздел на сайте:

Вот как он-лайн парсер base64-to-image отображает изображение (https://codebeautify.org/base64-to-image-converter):

Вот как это выглядит в PDF:

Первые идеи, почему строка base64 не завершена? Дополнительный вопрос: как разместить его в PDF, когда он заполнен?