JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.1/image-picker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.1/image-picker.js"></script>
<select class="image-picker" id= "tshirt-design">
  <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
  <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
  <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
  <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
  
  <option value="http://placekitten.com/220/200">Cute Kitten 1</option>
  <option value="http://placekitten.com/180/200">Cute Kitten 2</option>
  <option value="http://placekitten.com/130/200">Cute Kitten 3</option>
  <option value="http://placekitten.com/270/200">Cute Kitten 4</option>
</select>

<!-- <label title="Add a background" class="myFile2"><span class="mdi mdi-image"> Add Background</span>
<input type="file" id="file2" />
</label> -->
<label title="Add an image" class="myFile">Add Photo
  <input type="file" id="file" />
</label>
<a id="lnkDownload" title="Save"><span class="mdi mdi-download"> Save</span></a>
<div id="tshirt-div" style="width:600px;height:600px;position:relative;background-color:#fff;">
  <img id="tshirt-backgroundpicture" src= "https://secure-cdn.logosoftwear.com/images_products2/9928/9928.blowup.jpg"/>
  <div id="drawingArea" class="drawing-area">
    <div class="canvas-container">
      <canvas id="fCanvas" width="250" height="380" style="position:absolute;left:0px;right:0px"></canvas>
    </div>
  </div>
</div>

CSS

canvas {
   border : 2px solid black;
}


.drawing-area{
    position: absolute;
    top: 60px;
    left: 122px;
    z-index: 10;
    width: 200px;
    height: 400px;
}

.canvas-container{
    // width: 200px;
    // height: 400px;
    position: relative;
    user-select: none;
}

.tshirt-div{
    width: 600px;
    height: 600px;
    position: relative;
    background-color: #fff;
}

#canvas{
    position: absolute;
    width: 200px;
    height: 400px;
    left: 0px;
    top: 0px;
    user-select: none;
    cursor: default;
}

JavaScript

//canvas
let canvas = new fabric.Canvas('fCanvas');

//add manually image to canvas



function updateTshirtImage(imageURL){
  fabric.Image.fromURL(imageURL, function(img) {
    img.scaleToHeight(300);
    img.scaleToWidth(300);
    canvas.centerObject(img);
    canvas.add(img);
    canvas.renderAll();
  }, {crossOrigin: 'Anonymous'});
}


//selecting images based on value NOT WORKING
//choose/select bottom 4 options to add images
document.getElementById("tshirt-design").addEventListener("change", function(){
  updateTshirtImage(this.value);
}, false);
//up to here


//selecting images based on data-image-src NOT WORKING/SAVE
//choose/select top 4 select options to add images
images = {"1":"http://placekitten.com/220/200","2":"http://placekitten.com/180/200","3":"http://placekitten.com/130/200","4":"http://placekitten.com/270/200"}
//image change on canvas by select
document.getElementById("tshirt-design").addEventListener("change", function(){
  updateTshirtImage(images[this.value]);
}, false);
//up to here
 

//save canvas
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e) {
  this.href = canvas.toDataURL({
    format: 'png',
    quality: 0.8
  });
  this.download = 'custom.png'
}