Javascript 如何使我的画布（fabricjs）始终保持窗口的全宽，以及在调整窗口大小并保持对象就位后

我有一张画布，上面有一张填满画布的图片。这项工作很好，但我想有画布的整个宽度的窗口。现在画布的宽度是我放进去的图像的宽度

我在脚本的底部尝试了以下内容：

function resizeCanvas() {
  canvas.setHeight(img.height);
  canvas.setWidth(window.innerWidth);
  canvas.renderAll();
}

resizeCanvas();

但这是行不通的

我还尝试过在画布元素的参数和css中提供100%的宽度，但都没有成功

代码笔与工作示例：

如果增加屏幕大小，图像会在一段时间后停止，而不是保持浏览器窗口的全宽

---

这可能吗？将所有对象保持在它们的位置？

修复起来并不容易，但我找到了一些可以使其工作的文档

首先将代码编辑为

realWidth

并添加

var realWidth=window.innerWidth

然后，为了设置背景，请删除当前代码并添加

  fabric.Object.NUM_FRACTION_DIGITS = 10;
  fabric.Image.fromURL(source, function(img) {
      img.scaleToWidth(canvas.width);
      canvas.setBackgroundImage(img);
      canvas.requestRenderAll();
    });

这应该可以解决问题，背景将占据整个屏幕的大小

更新圆位置的新计算

等于
Newposition=oldPosition*（newWidth/oldWidth）

在这里您可以看到它是有效的
请在这里提供一个关于堆栈溢出的工作示例。您可以使用堆栈代码段（该图标类似于编辑器工具栏中的
）。至少，提供足够的代码在问题本身中重现问题，在堆栈溢出上，而不仅仅是在CodePen上。谢谢，但是当调整大小时，对象位于图像上方的另一个点上。有可能让他们在同一地点吗？因此，椅子上的圆点，留在椅子上等等。这就是你必须做的，你需要清除所有画布并重建它。因此，圆点可以跟随图像调整大小。如果你不能做到这一点，那么你可以告诉我，这样我就可以为你做到。但是你自己处理这件事应该很容易。不过我现在确实帮你解决了。圆圈将跟随rezise图像。看看codepen agen。如果你还需要什么，请告诉我。另外，请务必阅读我的更新，以便您能够理解。@twan如果我的回答确实解决了您的问题，请不要忘记指出：）我花了很多时间来解决这个问题。啊哈，好的，谢谢。是的，这很容易解决，您只需将
scaleX和scaleY
与
scaleToWidth
相乘，它应该非常适合。但其他工具提示似乎有点错误，其中包含一只狗：）