Responsive Canvas Fabric JS

by Anand Rathod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<div  class="box">
    <h2>Choose Background</h2>

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

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

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

</div>

<div  class="box">
    <button id="jsson">json</button>
    <canvas id="c"></canvas>
</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(600);
		canvas.setWidth(800);
    canvas.on('after:render', function(){ this.calcOffset(); });
    
    

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

}


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


// START RESPONSIVE CANVAS
    
  widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width; // capture width screen onload
canvasScale = 1; //global  

      if (widthscrencan <=360){ 
 
  function zoomIn() {
	  var SCALE_FACTOR = .37;
      canvasScale = canvasScale * SCALE_FACTOR;

      canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
      canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

      var objects = canvas.getObjects();
      for (var i in objects) {
          var scaleX = objects[i].scaleX;
          var scaleY = objects[i].scaleY;
          var left = objects[i].left;
          var top = objects[i].top;

          var tempScaleX = scaleX * SCALE_FACTOR;
          var tempScaleY = scaleY * SCALE_FACTOR;
          var tempLeft = left * SCALE_FACTOR;
          var tempTop = top * SCALE_FACTOR;

          objects[i].scaleX = tempScaleX;
          objects[i].scaleY = tempScaleY;
          objects[i].left = tempLeft;
          objects[i].top = tempTop;

          objects[i].setCoords();
      }
  
     
      canvas.renderAll();
	  alert( 'Width ...