title: div contents overwrite each other
body: <p>I have a div in which I applied text and images.It looks fine until I convert it as an image using html2canvs library.When this div is converted to image the text become smaller and other image inside div overwrite it. I want that the div image looks as it was before capturing that div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ConvertToImage(btnExport) {
    html2canvas($("#myDIV")[0]).then(function(canvas) {
      var base64 = canvas.toDataURL();
      $("[id*=hfImageData]").val(base64);
      __doPostBack(btnExport.name, "");
    });
    return false;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myDIV {
    width: 550px;
    height: 650px;
    background-image: url(myimg.png);
    color: orange;
    float: right;
    margin-top: 150px;
    background-repeat: no-repeat;
    border: 2px solid midnightblue;
    margin-right: 150px;
    font-size: x-large;
  }
  #logo {
    width: 85px;
    height: 150px;
    background-image: url('logo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.1);
  }
  #logo2 {
    width: 85px;
    height: 150px;
    background-image: url('logo2.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .text_decoration {
    width: 200px;
    height: 60px;
    background: transparent;
    border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDIV"&gt;
    &lt;div style="height:510px;width:290px;margin:50px 100px"&gt;
      &lt;input maxlength="15" type="text" id="myText" class="text_decoration resize-drag" autocomplete="off" /&gt;
      &lt;div id="logo" class="resize-drag"&gt;&lt;/div&gt;
      &lt;div id="logo2" class="resize-drag"&gt;&lt;/div&gt;
      &lt;img id="images" src="#" class="resize-drag" style="display:none" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;asp:HiddenField ID="hfImageData" runat="server" /&gt;
  &lt;asp:Button ID="btnExport" Text="Export to Image" runat="server" UseSubmitBehavior="false" 
   OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" CssClass="btnstyle" Height="50px" Width="200px" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>       protected void ExportToImage(object sender, EventArgs e)
      {
          string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
          byte[] bytes = Convert.FromBase64String(base64);
          MemoryStream msImage = new MemoryStream(bytes,0,bytes.Length);
          msImage.Write(bytes, 0, bytes.Length);
          System.Drawing.Image imageTosave = 
          System.Drawing.Image.FromStream(msImage, true);
          string fileName = Guid.NewGuid() + ".png";
          string filePath = 
          Path.Combine(Server.MapPath("~/CanvasImages/"+fileName));         
          imageTosave.Save(filePath, ImageFormat.Png);
          string dbPath = "~/CanvasImages/" +fileName;
         }
  </code></pre>