title: How to fix div position in html2canvas
body: <p>i am trying to make a customized  product, and the issue i am getting here is when i customize my product and try to save it or preview it my div position is not the same i set before! printArea is the div which i want as an image.</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;style&gt;
          #printArea
          {
              z-index: 1;
              height: 330px;
              width: 330px;
              border: 1px dashed black;
              align-items: center;
              position: relative;
              left: 126;
              top: 165;
              margin: 20px;
              padding: 10px;
              overflow: hidden;   
          }
      &lt;/style&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-2"&gt;
                  &lt;input type="file" name="file"&gt;             
              &lt;/div&gt;
              &lt;div class="col-md-8"&gt;&lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                  &lt;a href="#" class="button btn btn-download" id="btn-Preview-Image"&gt;Preview&lt;/a&gt;
                  &lt;a class="button btn btn-download" id="btn-Convert-Html2Image" href="#"&gt;Download&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-2"&gt;      
              &lt;/div&gt;
              &lt;div class="col-md-8"&gt;
  
                  &lt;div class="box"&gt;
                      &lt;div id="printArea" class="print-area"&gt;
                          &lt;div id="draggable4" class="ui-widget-content" style="width: 204px; height: 204px; overflow: hidden; z-index: 100;  left: 69px; top: 69px;"&gt;
                              &lt;div class="upload-image-preview"&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;img src="&lt;?php echo base_url(); ?&gt;assets/user/img/customTshirt.jpg" class="" id="mirror" style="position: relative; width: 600px; height: 600px; left: 13px; top: -350px; "/&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;div id="previewImage"&gt;
      &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var element = $(".box"); // global variable
  var getCanvas; // global variable
  
  $("#btn-Preview-Image").on('click', function () {
      html2canvas(element, {
          onrendered: function (canvas) {
              $("#previewImage").append(canvas);
              getCanvas = canvas;
          }
      });
  });
  
  $("#btn-Convert-Html2Image").on('click', function () {
      var imgageData = getCanvas.toDataURL("image/png");
      // Now browser starts downloading it instead of just showing it
      var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
      $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What i want
  <a href="https://i.imgur.com/Y8vMf35.png" rel="nofollow noreferrer">http://i.imgur.com/Y8vMf35.png</a></p>
  
  <p>What i get
  <a href="https://i.imgur.com/wZt9eDF.png" rel="nofollow noreferrer">http://i.imgur.com/wZt9eDF.png</a></p>