Increasing canvas height at runtime in Fabric.js affecting object selectable and drag drop in IE9

Question

Fabric.js working for me be but when I increase height/ width of canvas run time. newly add dynamic object I am able to drag drop in old canvas area. but not in increased area.

I am using canvas in div with overflow.

If I drag new object on hidden area and I scroll down the canvas then objects are locked.

Below is my HTML code:

<input id="Button1" type="button" value="Circle" onclick="addcricle();" /><input
        id="Button2" type="button" value="square" onclick="addsquare();" />   
<button id="Button12" onclick="changeMyHight();">Change Work Area</button>
   <div style="width: 900px; height: 800px; overflow: scroll">
    <canvas id="canvas" width="800" height="700px" style="border: 1px solid #000000"></canvas>
</div>

My Scripts

 var copiedObject;
    var copiedObjects = new Array();
    var canvasScale = 1;
    var SCALE_FACTOR = 1.2;
    var canvas = new fabric.Canvas('canvas');



    canvas.selectionColor = 'rgba(0,255,0,0.3)';
    canvas.selectionBorderColor = 'red';
    canvas.selectionLineWidth = 5;
    function addcricle() {
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
        canvas.calcOffset();
    }
    function addsquare() {
        canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 75, left: 75 }));
        canvas.calcOffset();
    }

function changeMyHight() {
    canvas.setHeight(1500);
    canvas.setWidth(1800);
    canvas.renderAll();
    canvas.calcOffset();
}

Answer 1

I solved this issue was in div overflow I changed HTML as below:

<div style="width: 900px; height: 800px; overflow: scroll" onscroll="setMyOffset();">
  <canvas id="canvas" width="800" height="700px" style="border: 1px solid #000000"></canvas>
</div> 

function setMyOffset() {
  canvas.calcOffset();
}