css - Save image on background image in canvas Html5 javascript -

i using html5 , java script. set background image(t-shirt) in canvas. , uploading image user on t-shirt. first time show front side of t-shirt want add side of t-shirt background image. show screen shot, want.

after click on front side small image. save.

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>  <div class="container">             <div class='row'>                 <div class="col-sm-12">                                          <input type="file" id="file" class="btn btn-success">                                      <br/>                     <span>                         front <span style="margin-left:50px">back</span><br>                         <a href='' class='txt' target="_blank"> <img width="60" height="80" src="http://www.regalocasila.com/image/data/personalized-t-shirt-front-side-print.jpg"></a>                     </span>                     <span>                         <a href='' class='txt' target="_blank"> <img width="60" height="80" src="http://www.regalocasila.com/image/data/personalized-t-shirt-front-side-print.jpg"></a>                     </span>                     <canvas id="canvas" width="640" height="650" style="float:left;border: 1px solid black;  box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas>                     <img id="preview" />                     <!--                    <a href='' id='txt' target="_blank" class="btn btn-success">click me!!</a><br />-->                  </div>             </div>         </div> 

java script:

 var canvas = new fabric.canvas('canvas');              // initialize fabric canvas , assign global windows object debug                     canvas.setbackgroundimage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg',                     canvas.renderall.bind(canvas), {crossorigin: 'anonymous'});             document.getelementbyid('file').addeventlistener("change", function (e) {                 var file = e.target.files[0];                 var reader = new filereader();                 console.log("reader   " + reader);                 reader.onload = function (f) {                      var data = f.target.result;                     fabric.image.fromurl(data, function (img) {                         var oimg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);                         canvas.add(oimg).renderall();                         canvas.setactiveobject(oimg);                     });                 };                 reader.readasdataurl(file);             });              document.queryselector('.txt').onclick = function (e) {                 e.preventdefault();                 canvas.deactivateall().renderall();                 console.log("ncbfnbfgnmfd   " + canvas.todataurl());                 document.queryselector('#preview').src = canvas.todataurl();             };               $('#remove').on('click', function () {                 canvas.getactiveobject().remove();             }); 

you can see jsfiddle: https://jsfiddle.net/varunpes/mdh1xf3w/2/
but want, when user click on t-shirt background image(front side t-shirt) should replaced side of t-shirt , save design on t-shirt.

when click on side image save front side design , change background image side image.

when click on front side on front side t-shirt save side of design , change background image front side image.

my main motive change background image , save design on t-shirt.