Fabri c. js: изменение размера изображения и других объектов на холсте в соответствии с высотой и шириной div.

Question

У меня есть холст (width = "700" height = "500") внутри div (height: 300px; width: 500px), и холст можно прокручивать. У меня есть несколько прямоугольных объектов внутри холста, как показано ниже. Я пытаюсь изменить размер холста на высоту и ширину div. Но объекты прямоугольника неправильно масштабируются до ширины и высоты div.

Fiddle: 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();
});