html2canvas.js cut render image from half, any alternate for it

I develop a feature for a site for logo edit in which user can drag the image, change background color, resize the image on the canvas after all these changes, generate all data as image. All flow is working fine. I using html2canvas.js to render my div but it's not working properly

Code for generating div to image

$('.save-logo-upload').click(function () {
  var logo_resize_image = $(".logo_resize-image").attr("src");
  $('input[name="logo_img"]').val(logo_resize_image);
  $('#logo_canvas_model').modal('hide');
  // Convert the div to image (canvas)
  var element = document.getElementById("logo_component")
  html2canvas(element, {

}).then(function (canvas) {
  // Get the image data as JPEG and 0.9 quality (0.0 - 1.0)
  var app_header = canvas.toDataURL("image/jpeg", 1.0);
  $(".pre-app-header").attr("src", app_header);
  console.log(app_header);
  });
});

My model and div

<div class="modal-content">
            <div class="modal-header" style="height: 31px !important;">
                <button type="button" class="close remove-logo-upload" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="custom-width-modalLabel">Logo upload</h4>
            </div>
            <div class="modal-body" id="logo_component">
                <div class="logo_content">
                    <div class="logo_component" allow="autoplay; fullscreen" style="background-color: rgb(181, 59, 59);">
                        <div class="logo_overlay" style="display: block;">
                            <div class="logo_overlay-inner">

                            </div>
                        </div>
                        <div class="resize-container" style="top: 0px; left: 1.51715px;"><span class="resize-handle resize-handle-nw"></span><span class="resize-handle resize-handle-ne"></span><img class="logo_resize-image" src="apple_logo.png" alt="image for resizing"><span class="resize-handle resize-handle-sw"></span><span class="resize-handle resize-handle-se"></span></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="color" id="logo_upload_color" name="logo_upload_color" class="" value="#fff">
                <button type="button" class="btn btn--rounded btn-orange save-logo-upload">Save changes</button>
                <button type="button" class="btn  btn--rounded lb-orange text-uppercase btn-next remove-logo-upload" data-dismiss="modal">Close</button>
            </div>
        </div>

generated image cut from half Please help me if you have any alternative for this issue

This is my render image which is incorrect