调整画布大小调整大小以适应画布新大小

Question

我需要在调整大小时计算对象比例以适应新的画布大小，我会更好地解释图片，例如我们有这种情况：

另一个例子：

所以对象需要在不同的屏幕和分辨率中按比例调整大小，我不想超出/溢出画布大小

例如在这个fiddle中我需要这个对象拉伸并适合画布中的所有可用空间。

＆＃13;

＆＃13;

var canvas  = new fabric.Canvas('c');

var shadow = {
    color: 'rgba(0,0,0,0.6)',
    blur: 20,    
    offsetX: 10,
    offsetY: 10,
    opacity: 0.6,
    fillShadow: true, 
    strokeShadow: true 
}

 var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10, 
        opacity: .8      
    });
    
  var rect1 = new fabric.Rect({
        left: 50,
        top: 100,
        fill:  "#f0ff00",
        stroke: "#000",
        width: 80,
        height: 80,
        strokeWidth: 10, 
        opacity: .8      
    });
   
rect.setShadow(shadow);
canvas.add(rect);
canvas.add(rect1);

＆＃13;

#c{
  border:1px solid blue;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

＆＃13;

＆＃13;

＆＃13;