Javascript 如何适合fullsreen画布并保持元素的位置？

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

var canvas=newfabric.canvas（'c'）；
var路径=新结构路径（'M 756 349 L 744 308 L 787 310 L 794 346 z'）；
path.set({
填充：“红色”，
不透明度：0.5
});
canvas.add（路径）；
canvas.setBackgroundImage（'phase3.jpg'，canvas.renderal.bind（canvas）{
宽度：canvas.width，
高度：canvas.height，
原文：“左”，
原创：“顶级”
});
放多少钱

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

就在
var canvas=newfabric.canvas（'c'）后面？
var宽度=1600；
var高度=900；
var scaleFactor=1；
如果（屏幕宽度<1281）{
scaleFactor=0.8；
}否则如果（屏幕宽度<1361）{
scaleFactor=0.85；
}否则如果（屏幕宽度<1441）{
scaleFactor=0.9；
}否则如果（屏幕宽度<1601）{
scaleFactor=1；
}否则{
scaleFactor=1.2；
}
宽度=宽度*缩放因子；
高度=高度*缩放因子；
var canvas=newfabric.canvas（'canvas'）；
canvas.setWidth（宽度）；
canvas.setHeight（高度）；
canvas.calcOffset（）；
if（scaleFactor！=1）{
对于（var i=0；i
    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();}