如何在fabric.js中调整窗口大小时保留对象位置

Question

我写了一个应用程序，我试图用fabric.js矩形隐藏狗的右眼。 但是，如果我调整窗口大小，则会移动矩形。

这是fiddle和代码： `

var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth*0.98);
canvas.setHeight(window.innerHeight*0.98);
canvas.backgroundColor = 'pink';
canvas.selection = false;
var x1=150, y1=150, x2=180, y2=180, img1;
var rect = new fabric.Rect({
  stroke: 'blue',
  opacity: 1,
  strokeWidth: 2,
  selectable: true,
  fill : 'green',
  left : x1,
  top : y1,
  width : x2,
  height : y2
});
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 //i create an extra var for to change some image properties
 img1 = myImg.set({ left: 0, top: 0 ,width:canvas.width,height:canvas.height});
 canvas.add(img1);  
 canvas.add(rect);

});

window.addEventListener("resize", function() {
    console.log('resizing');
  var dims = {
    w : canvas.width,
    h : canvas.height
  };
  canvas.setWidth(window.innerWidth*0.98);
    canvas.setHeight(window.innerHeight*0.98);
  img1.width = window.innerWidth*0.98;
  img1.height = window.innerHeight*0.98;
  rect.left *= dims.w/canvas.width;
  rect.top *= dims.h/canvas.height;
  rect.width *= dims.w/canvas.width;
  rect.height *= dims.h/canvas.height;
});`

我错过了什么吗？