Responsive Canvas Fabric JS

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="https://picsum.photos/200/200"/>
    
    <img onclick="addtoo(this)" src="https://picsum.photos/200/200"/>

</div>
<button id="jsson">json</button>


<div class="box" id="box">
   <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  

	var ocw = canvas.width;
  var och = canvas.height;
  var box = document.getElementById('box');
  box.width = ocw;
  
  console.log('ocw: ', ocw);
  console.log('och: ', och);
  
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    box.width = window.innerWidth * .35;
    
    console.log('box w: ', box.width);

    var sf = box.width / ocw; 
    
    console.log('sf: ', sf);

    setCanvasZoom(sf);
    canvas.renderAll();    
  }

  // resize on init
  resizeCanvas();
  

function setCanvasZoom(zoom) {
				var objects = canvas.getObjects();
				for(i in objects) {
       		var object = objects[i];
					var scaleX = object.scaleX,
						scaleY = object.scaleY,
						left = object.left,
						top = object.top;
					
					// preserve the original dimensions.
					object.original_scaleX = !object.original_scaleX ? scaleX : object.original_scaleX;
					object.original_scaleY =...