title: allow html2canvas to display images and download with images
body: <p>i have been trying to get an answer for this question for the past 3 days and cant seem to find an answer for my question. my code is very long please forgive me. the reason why my code is long is because i have to take all the variables in consideration i asked the same question and left out some code and when i tried integrating it into my page it did not work.what i want is for my dog image to show in my shirt image when i download it but right now i get a blank download. here is a live code <a href="http://torcdesign.com/evol/" rel="nofollow noreferrer">http://torcdesign.com/evol/</a></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 fctCheck(gender) {
    var elems = document.getElementsByName("subselector");
    for (var i = 0; i &lt; elems.length; i++) {
      elems.item(i).style.display = "none";
    }
    document.getElementById(gender).style.display = "block";
  }
  $('#men').on('change', function() {
    $("#mtsm").css('display', (this.value == 'tsm') ? 'block' : 'none');
  });
  
  
  
  $(document).ready(function() {
    $('.colore.active').each(function() {
      $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
    });
    $('.colore').on('click', function() {
      $('.container').css('src', '');
      $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
      $('.container7').css('background-image', 'url(' + $(this).data("image-back") + ')');
    });
    $('#toggler').click(function() {
      var tmp = $('.container').css('background-image');
      $('.container').css('background-image', $('.container7').css('background-image'));
  
      $('.container7').css('background-image', tmp);
    });
  });localStorage.option1 = "wow cool option text here"
  $(document).ready(function() {
    $('#imajes').change(function() {
      $('.subselector').hide();
      $('.smallimages').hide();
      $('#' + $(this).val()).show();
   
    });
    
      $('.smallimages').hide();
      var id = $(this).attr('id');
      var val = $(this).val();
   
   
  $('#dog').on('change', function() {
    
    $("#bulldogimges").css('display', (this.value == 'bulldog') ? 'block' : 'none');
  
  
  
  });
  
  $('img').on('click', function() {
      $('#fotos').append('&lt;div class="imgdrag"&gt;&lt;img class="modal-content" src="' + $(this).attr('src')+ '"/&gt;&lt;/div&gt;'); $('.imgdrag').draggable();
  $('#fotos').droppable();
              $('.modal-content').resizable();
  
  
  $(".download").attr("href",$(this).attr('src'));
    $(".download").show();
  });
  
    
    
  });
  
  
  
  
  
  var download = document.getElementById("download"),
    result = document.getElementById("previewImage");
  
  function renderContent() {
      html2canvas(document.getElementById("firstshirt"), {
          allowTaint: true
      }).then(function(canvas) {
        result.appendChild(canvas);
          download.style.display = "inline"; download.href = result.children[0].toDataURL();
      });
  }
  
  function downloadImage() {
    
  }
  
  document.getElementById("btn-Preview-Image").onclick = renderContent;
  download.onclick = downloadImage</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {background-color: transparent;
      width: 490px;
      height: 500px;
      border: 2px solid;
      position: relative;
  overflow: hidden;
  
  /* Will stretch to specified width/height */
    background-size: 490px 500px;
    background-repeat: no-repeat;
  
  }.colore {
    float: left;
    width: 20px;
    height: 20px;
    margin: 5px;
    border: 1px solid rgba(0, 0, 0, .2);
  }
  .white {
    background: #FFFFFF;
  }.black {
    background: #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" 
   src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://hongru.github.io/proj/canvas2image/canvas2image.js"&gt;&lt;/script&gt;
  
  &lt;script  
   src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;&lt;script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet"
  href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt;
    &lt;script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet"
   href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="firstshirt" class="container" style="float:left;"&gt;
  &lt;center&gt;&lt;div id="wrapper"&gt;&lt;div id="boxes" class="container5" style="float:center;"&gt;
   &lt;div data-bind="foreach:items" class="fix_backround"&gt;
     &lt;div class="item" data-bind="draggable:true,droppable:true"&gt;
          
        
        
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;a href="" download&gt;&lt;span id="image" class="preview-area"&gt;&lt;/span&gt;&lt;/a&gt;&lt;div id="fotos" &gt;&lt;img class="modal-content" id="imgdisplay" /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
  &lt;input id="btn-Preview-Image" type="button" value="Preview"/&gt;&lt;a id="download" download="my_image.png" href="#"&gt;Download image&lt;/a&gt;
  
  &lt;select id="Gender" onchange="fctCheck(this.value);"&gt;
          &lt;option value=""&gt;Choose Gender&lt;/option&gt;
          &lt;option value="men"&gt;Men&lt;/option&gt;
     
      &lt;/select&gt;  
     
      &lt;select id="men" name="subselector" style="display:none"&gt;
        &lt;option value=""&gt;Choose an item&lt;/option&gt; 
        &lt;option value="tsm"&gt;T-Shirt&lt;/option&gt;
      
      
      &lt;/select&gt;  
    
       
              
             &lt;div style='display:none;' id="mtsm"&gt;
      &lt;div class="colore white" data-image="https://torcdesign.com/shirts/white.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="colore black active" data-image="https://torcdesign.com/shirts/black.jpg"&gt;
      &lt;/div&gt;
     &lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  &lt;select id="imajes"&gt;
          &lt;option value=""&gt;Choose Image&lt;/option&gt;
          &lt;option value="new-upload"&gt;Upload Image&lt;/option&gt;
          &lt;option value="dog"&gt;Dog&lt;/option&gt;
        
      &lt;/select&gt; 
  
  &lt;select id="dog" name="subselector" class="subselector" style="display:none"&gt;
    &lt;option value=""&gt;Choose an item&lt;/option&gt;
    &lt;option value="bulldog"&gt;Bulldog&lt;/option&gt;
   
  &lt;/select&gt;
  
  
  
  
  
  
  &lt;div style='display:none;' id="bulldogimges" class="smallimages"&gt;
  &lt;div class="imgcontainerss" data-image="https://torcdesign.com/clipart/pT78gE6pc.gif"&gt;
      &lt;img src="https://torcdesign.com/clipart/pT78gE6pc.gif" alt="Smiley face" width="55" height="55"&gt;
    &lt;/div&gt;
  &lt;div class="imgcontainerss" data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif"&gt;
      &lt;img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" alt="Smiley face" width="55" height="55"&gt;
    &lt;/div&gt;
  &lt;div class="imgcontainerss" data-image="https://torcdesign.com/clipart/free-bulldog-clipart-031350.gif"&gt;
      &lt;img src="https://torcdesign.com/clipart/free-bulldog-clipart-031350.gif" alt="Smiley face" width="55" height="55"&gt;
    &lt;/div&gt;&lt;/div&gt;
  &lt;h3&gt;result:&lt;/h3&gt;
  &lt;div&gt; &lt;div id="previewImage"&gt;
      &lt;/div&gt;&lt;a id="download" download="my_image.png" href="#"&gt;Download image&lt;/a&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>