javascript - Canvas2Image.js pushing DIV image of the canvas

Question

Can anyone tell me why my div image is being pushed off the canvas? Is there an offset that I am missing. Sorry I am a newbie.

          var scaleBy = 5;
          var div = $("#testdiv");            
          var w = $(div).width();
          var h = $(div).height();

          var canvas = document.createElement('canvas');
          canvas.width = w * scaleBy;
          canvas.height = h * scaleBy;
          canvas.style.width = w + 'px';
          canvas.style.height = h + 'px';
          var context = canvas.getContext('2d');
          context.scale(scaleBy, scaleBy);

          html2canvas(div, {
              canvas:canvas,
              onrendered: function (canvas) {
                  theCanvas = canvas;
                  document.body.appendChild(canvas);

                  //Canvas2Image.saveAsImage(canvas, w, h, 'PNG');
                  Canvas2Image.saveAsJPEG(canvas);
                  //$("#previewImage").append(canvas);
              }
          });

And my DIV code is:

             <div class="widget-chart-container" id="test" style="background-color:white;">
                <div class="be-spinner" id="spinner-line-chart1" style="position:inherit;left:45%;margin-top:30%;">
                  <img src="assets/img/gc/loading9.gif" style="width: 50px;opacity:100%;"/> 
                </div>

                <div id="content-line-chart1">
                  <!-- Chart - START-->                      
                  <div id="line-chart1" style="height: 220px;"></div>
                  <!-- Chart - END -->

                  <!-- Table Below Chart - START--> 
                  <div class="chart-table pt-3">
                    <div id="chart-table1" style="min-height: max-content;"></div>
                  </div>
                  <!-- Table Below Chart - END -->                       
                </div>
              </div>

This is what the DIV looks like:

enter image description here

And this is what the output looks like

enter image description here

It's driving me nuts. Any help would be much appreciated.

question from:https://stackoverflow.com/questions/65949577/canvas2image-js-pushing-div-image-of-the-canvas

Answer 1

Waitting for answers