Fabric.js：调整画布中图像和其他对象的大小以匹配div的高度和宽度

Question

我在（height：300px; width：500px）的div内有canvas（width =“ 700” height =“ 500”），并且画布是可滚动的。我在画布内有几个矩形对象，如下所示。我正在尝试将画布调整为div的高度和宽度。但是矩形对象无法正确缩放到div的宽度和高度。

提琴：http://jsfiddle.net/eajithkumar128/4kLbc02w/3/

调整大小后：

<div id="canvas" style="overflow:scroll;height:300px;width:500px">
    <canvas id="clone" width="700" height="500"></canvas>
</div>
<button id="test-resize" type="button" class="btn btn-success btn-sm">resize</button>
<button style="display:none" id="undo-resize" type="button" class="btn btn-success btn-sm">undo</button>

var canvas = new fabric.Canvas("clone", {
      backgroundColor : "gray",
      selection: true
   });

var rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'yellow',
      width: 50,
      height: 50,
      objectCaching: false,
      stroke: 'lightgreen',
      strokeWidth: 4,
    });
    var rect1 = new fabric.Rect({
      left: 200,
      top: 300,
      fill: 'yellow',
      width: 40,
      height: 40,
      objectCaching: false,
      stroke: 'lightgreen',
      strokeWidth: 4,
    });
         var rect2 = new fabric.Rect({
      left: 250,
      top: 300,
      fill: 'yellow',
      width: 40,
      height: 40,
      objectCaching: false,
      stroke: 'lightgreen',
      strokeWidth: 4,
    });

    canvas.add(rect,rect1,rect2);
canvas.renderAll();
$("#test-resize").click(function(){
    canvas.forEachObject(o=>{
    o.scaleToWidth(300);
    o.scaleToHeight(500);
  })
  canvas.setHeight(300);
  canvas.setWidth(500);
    canvas.renderAll();
});