my canvas image is not displaying anything when downloaded

Question

my problem now is that when i click on download image the image is downloaded but the image is black just the text shows up why is that? i tried many things but i haven't had a result. i made a div with an image inside the div i also have a text box inside that div where i can write text and change color i can also upload images from desktop i want to save that div into an image and save it to my desktop but i don't know how to do that. here is where i got the idea How to save img to user's local computer using HTML2canvas

$(function() { 

 
var element = $("#firstshirt"); // global variable
var getCanvas; // global variable
 
    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
    allowTaint: true,
            logging: true,
                onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });
});



  $("#save_image_locally").click(function(){
    html2canvas($("#firstshirt"), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
  });

.container5 {
  background-color: transparent;
  width: 220px;
  height: 320px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  position: absolute;
  overflow: hidden;
}.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;
}

 <center>
<div id="firstshirt" class="container" style="float:left;">
<center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
 <div data-bind="foreach:items" class="fix_backround">
   <div class="item" data-bind="draggable:true,droppable:true">
        
        <center><span id="texter" class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
      
</div></div>

<a href="" download><span id="image" class="preview-area"></span></a></div></div></center><br><br><br><br></div></center>
<br/>
   </center></div></div><center>
    <div id="previewImage">
    </div>
 </center>


<center><p><font color="red"><b>Please preview and download the image and upload below we apologize for the inconvenience.</b></font></p><input id="btn-Preview-Image" type="button" value="Preview"/><button id="save_image_locally">download img</button>
    <p> <label form="file">Upload Downloaded Image:</label>
 <input type="file" name="file3" id="file3" required formvalidate> </p>
    <br/>
 </center> 
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://cdn.shopify.com/s/files/1/1602/3035/files/jquery-3.1.1.min.js?9312974637985503683"></script>
<script src="https://cdn.shopify.com/s/files/1/1602/3035/files/knockout-3.4.1.js?884425216910251312"></script>
<script  
 src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
 <link rel="stylesheet"
href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>