HTML2Canvas 5.0 Not saving Background Image

I'm learning JS and front end development for the first time. As part of my project I'd like a button that when pressed will convert a section of html into a picture. For this task I've decided to use the HTML2Canvas library as I've heard a lot of good things about it and it looked fairly simple to setup.

When using HTML2Canvas I'm able to save seemingly everything except the background image. When searching for information about this problem others have suggested using the 5.0 build instead of 4.1 but I'm still experiencing the issue. Can anyone point me in the right direction?

My code is posted below.

HTML

<div class="myContainer" id="box") > </div>

<script src="https://github.com/niklasvh/html2canvas/releases/download/v0.5.0-beta4/html2canvas.js"></script>

<a href="#" onClick="saveIt()">save Image 1</a> 

CSS

.myContainer {
    width:230px; height:230px; line-height:4em;
    border:5px solid green;
    }
    #box{
       background-image: url(https://source.unsplash.com/random/230x230)
    }

canvas {
  position: absolute;
  top: 0;
  left: 400px;
  visibility: hidden;
}

JS

var saveIt = function() {
  html2canvas(document.getElementById("box"
), {
  onrendered: function(canvas) {
      document.body.appendChild(canvas);
      leCanvas = document.getElementsByTagName("canvas")[0];
      var img  = leCanvas.toDataURL("image/png");
      document.write('<span style="font:14px normal Helvetica, Arial; font-weight: bold; color:#13a6f5; margin-left:16px">Saved html png:</span> <br /><img src="'+img+'"/>');
  },
  width: 1920,
  height: 1080
});
}