如何适合全幅画布并保持元素位置？

Question

我正在尝试为网站制作交互式地图。 房子下面有一些区域，我想用不同的颜色标记它们。 我添加画布，路径和canvasBackground。

 var canvas = new fabric.Canvas('c'); var path = new fabric.Path('M 756 349 L 744 308 L 787 310 L 794 346 z'); path.set({ fill: 'red', opacity: 0.5 }); canvas.add(path); canvas.setBackgroundImage('phase3.jpg', canvas.renderAll.bind(canvas), { width: canvas.width, height: canvas.height, originX: 'left', originY: 'top' }); 

 <canvas id="c" width="1600" height="900"></canvas> 

然后我需要适应屏幕。 我尝试使用canvas.setDimensions（），但无法正常工作。

演示版

谢谢。 对不起，英语不好）

Answer 1

怎么样

canvas.setDimensions({
  width: body_w,
  height: body_h
});

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

Answer 2

    var width = 1600;
    var height = 900;
    var scaleFactor = 1;

     if(screen.width < 1281) {
        scaleFactor = 0.8;
      } else if (screen.width < 1361) {
        scaleFactor = 0.85;
      } else if (screen.width < 1441) {
        scaleFactor = 0.9;
      } else if (screen.width < 1601) {
        scaleFactor = 1;
      }  else {
        scaleFactor = 1.2;
      }
      width = width * scaleFactor;
      height = height * scaleFactor;

      var canvas = new fabric.Canvas('canvas');
      canvas.setWidth(width);
      canvas.setHeight(height);
      canvas.calcOffset();

    if(scaleFactor != 1) {
      for(var i=0; i<canvas._objects.length; i++){
         canvas._objects[i].scale(scaleFactor);
         canvas._objects[i].setLeft(canvas._objects[i].left * scaleFactor);
         canvas._objects[i].setTop(canvas._objects[i].top * scaleFactor);
         canvas._objects[i].setCoords();
      }
      canvas.renderAll();
    } else {canvas.renderAll();}

我在stackoverflow上找到了这个技巧，但是失去了链接）