JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<!---!!ACTUAL CODE HERE!!--->
<div class="wrapper col s9" id="canvasdiv">
  <div id="content">
    <br/>
    <center>
      <h2 class="outfitheading">Your Closet</h2> </center>

  </div>
  <div id="sidebar">
    <br/>
    <center>
      <h1 class="outfitheading">Today's Outfit</h1></center>
    <div id="outfit">
      <center>
        <div class="clothediv" id="hatdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
          <p>
            Pretend there is an image here.
          </p>
        </div>
      </center>
      <center>
        <div class="clothediv" id="semitopdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
          <p>
            Pretend there is an image here.
          </p>
        </div>
      </center>


      <center>
        <div class="clothediv" id="topdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
          <p>
            Pretend there is an image here.
          </p>
        </div>
      </center>


      <center>
        <div class="clothediv" id="legweardiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
          <p>
            Pretend there is an image here.
          </p>
        </div>
      </center>


      <center>
        <div...

CSS

.canvas {
  border-color: #E8E9EC;
  border-width: 5px;
  border-style: solid;
  padding: 200px;
}

#content {
  min-height: 900px;
  float: left;
  width: 50%;
  border-right: 10px solid #915f6d;
}

#sidebar {
  float: right;
  width: 50%;
}

#cleared {
  clear: both;
}

.clothediv {
  min-height: 80px;
}

JavaScript

var takeScreenShot = function() {
  html2canvas(document.getElementById("outfit"), {
    onrendered: function(canvas) {
        var tempcanvas = document.createElement('canvas');
        tempcanvas.width=465;
        tempcanvas.height=524;
        var context=tempcanvas.getContext('2d');
        context.drawImage(canvas,465,40,465,524,0,0,465,524);
        var link=document.createElement("a");
        link.href=canvas.toDataURL('image/jpg');
        link.download = 'screenshot.jpg';
        link.click();
    }
  });
}