Image is not saving giving error

[sarkarimalang]

in my below code im having issue first it is not saving the image in the new latest html2canvas it is giving error Uncaught (in promise) Error: Element is not attached to a Document.

In the old file i was using it was saving the image but was not saving properly the input fields which has arabic text center aligned. But the same arabic text center aligned shows perfect on the page.

<input id="charA" type="text" name="aname"
value="انا احبک یا وطنی"
class="arx resizeME nameA">

above input is center aligned and only it is not saving properly in the image and shows proper on page.

<style>
@font-face {
    font-family: 'traditional_arabicregular';
    src: url('fontsKU/traditional_arabic_regular-webfont.woff2') format('woff2'),
         url('fontsKU/traditional_arabic_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.arx {
    font-family: 'traditional_arabicregular', Arial, sans-serif;
}

  .canvasSaveder {
    position: relative;
    width: 100%;
    /* Use percentage width to make it responsive */
    height: 100%;
    /* Use percentage width to make it responsive */
  }
  /* Style for the image */

  img {
    max-width: 100%;
    height: auto;
  }
  /* Style for the input fields */

        input {
            position: absolute;
            border: none;
             font-size: 30px;
             background-color: transparent;
        }

  .nameA {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: center;
    width: 63%;
    height: 8%;
    left: 3%;
    top: 30%;
  }

  .nameE {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: center;
    width: 63%;
    height: 8%;
    left: 3%;
    top: 39%;
  }

  .nationalityE {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 23%;
    height: 8%;
    left: 25%;
    top: 49.5%;
  }

  .nationalityA {
    font-size: 23px;
    color: black !important;
    font-weight: bold;
    text-align: right;
    width: 17%;
    height: 8%;
    left: 49%;
    top: 49.5%;
  }

  .department {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 53%;
    height: 8%;
    left: 13%;
    top: 58%;
  }

  .title {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 53.5%;
    height: 8%;
    left: 12.5%;
    top: 69%;
  }

  .blood {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 9%;
    height: 8%;
    left: 24%;
    top: 78%;
  }

  .expiry {
    font-size: 25px;
    color: black !important;
    font-weight: bold;
    text-align: left;
    width: 25%;
    height: 8%;
    left: 22%;
    top: 88%;
  }

  .staffno {
    font-size: 25px;
    color: white !important;
    font-weight: bold;
    text-align: center;
    width: 28%;
    height: 8.5%;
    left: 71%;
    top: 90%;
  }

  .photo {
    width: 28%;
    height: auto;
    position: absolute;
    /* Change the position to absolute */
    right: 1%;
    /* Adjust the right property to position the image from the right edge */
    top: 40%;
  }
</style>

    <hr style="border: 1px solid black;">
        <button type="button" onclick="printStaffID()">Print Staff ID</button>
    <hr style="border: 1px solid black;">

<div id="printThisDiv">
  <div id="canvasSaveder" style="position: relative;">
    <img src="images/kacid.jpg" alt="Staff ID Image">
    <!-- Position input fields over the image with percentage-based margins -->
        <input id="charA" type="text" name="aname"
        value="<?php echo $aname; ?>"
        class="arx resizeME nameA">
    <input id="charE" type="text" name="ename" value="<?php echo htmlspecialchars($ename); ?>" class="resizeME nameE">
    <input id="natE" type="text" name="enationality" value="<?php echo htmlspecialchars($cename); ?>" class="resizeME nationalityE">
    <input id="natA" type="text" name="anationality" value="<?php echo htmlspecialchars($caname); ?>" class="arx resizeME nationalityA">
    <input id="department" type="text" name="department" value="<?php echo htmlspecialchars($dename); ?>" class="resizeME department">
    <input id="title" type="text" name="title" value="<?php echo htmlspecialchars($tename); ?>" class="resizeME title">
    <input id="blood" type="text" name="blood" value="<?php echo htmlspecialchars($blename); ?>" class="resizeME blood">
    <input id="date" type="text" name="expiry" class="resizeME expiry" value="<?php echo htmlspecialchars($current_date); ?>">
    <input id="staffnos" type="text" name="staffno" class="resizeME staffno" value="<?php echo htmlspecialchars($staffno); ?>">
    <span id="photo">
      <img src="images/employees/empPhotos/30546.jpg" class="photo">
    </span>
  </div>
</div>

<button onclick="saveAndPrintDiv()">Save and Print</button>

<script src="js/html2canvas_new.js"></script>

        <button id="myButton" type="button"
        class="btn btn-primary top">
            Create Image</button>
        <div id="img" style="display:none;">
            <img src="" id="newimg" class="top" />
        </div>

<script>
/*$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
html2canvas($('#div'), {
  onrendered: function(canvas) {
    var img = canvas.toDataURL()
    window.open(img);
  }
});
});*/

        $("#myButton").click(function() {
            html2canvas($("#canvasSaveder"), {
                onrendered: function(canvas) {
                    var imgsrc = canvas.toDataURL("image/png");
                    console.log(imgsrc);
                    $("#newimg").attr('src', imgsrc);
                    $("#img").show();
                    var dataURL = canvas.toDataURL();
                    $.ajax({
                        type: "POST",
                        url: "save_printed_id.php",
                        data: {
                            imgBase64: dataURL
                        }
                    }).done(function(o) {
                        console.log('saved');
                    });
                }
            });
        });
</script>