JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div  class="box">
    <h2>Choose Background</h2>

    <img onclick="backchange(this)" src="http://lorempixel.com/200/200/animals" width="100">
</div>

<div  class="box">
    <h2>Choose items</h2>

    <img onclick="addtoo(this)" src="http://lorempixel.com/200/200/animals" width="100">
    
    <img onclick="addtoo(this)" src="http://lorempixel.com/200/200/sports" width="100">

</div>

<div  class="box">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Preview png</button>

<canvas id="c"></canvas>


<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">  
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      
    <img src="data:">
    
    </div>
  </div>
</div>

</div>

CSS

#c{
     border:1px solid red;
     top:22px;
     left:0px;
     height: 100%;
     width: 99%;
 }

.box {
  float: left;
  margin: 1em;
}
.after-box {
  clear: left;
}

JavaScript

fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.padding = 5;
    
     
  var $ = function(id){return document.getElementById(id)};


  var canvas = this.__canvas = new fabric.Canvas('c');
  	canvas.setHeight(200);
		canvas.setWidth(300);
    

 function backchange(img)
{	
	var imag = img.src;  
  canvas.setBackgroundImage(imag, canvas.renderAll.bind(canvas), { width: 300,height: 200 });

}


    function addtoo(img)
    {
    var nameim = img.src;
     
      fabric.Image.fromURL(nameim, function(img) {
        var oImg = img.set({ left: 10, top: 100, angle: -15 }).scale(0.4);
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    	
    	 img.animate('left', 50, {
            onChange: canvas.renderAll.bind(canvas)
        });
    	
      });
      
      }
      
var dataURL = canvas.toDataURL({
  format: 'png'
});

alert(dataURL);