Javascript 带画布的引导模式无法正确显示响应设计

在我的Angular not JS应用程序中，我使用引导模式提供一个表面HTML5画布，用户可以在其中绘制一些草图

我面临的问题是，当我将画布放在模态中时，响应性设计突然停止工作：

HTML:

在设置canvasElem变量之前，模态会正确显示响应设计，但一旦我设置它，响应设计就会中断，不仅画布会从模态对话框中伸出，而且画布上方的所有其他标记（如按钮和输入）也会伸出，就像工具箱一样

canvasElem的唯一用途是：

let rect = this.canvasElem.getBoundingClientRect();

否则我甚至不需要它，ctx变量也只用于绘图操作，比如ctx.fillRect等等，所以我真的不确定这里出了什么问题

有人知道这个问题吗？我该如何解决

更新：

我的解决方案/技巧如下：

setTimeout(() => {
  window.dispatchEvent(new Event('resize'));
}, 1);

---

宽度仅延迟一毫秒，现在效果非常好。

它可以简单到缺少画布的最大宽度css

canvas {  max-width: 100%; }

我做了一个简单的jsfiddle来测试它。如果没有最大宽度，您的画布将无法响应。如果你发布一个工作片段，它更容易复制

---

非常感谢，我刚刚为此做了另一个破解：因为网格系统在调整屏幕大小后开始工作，所以我在这里做这个：setTimeout=>{window.dispatchEventnew Event'resize'；}，1；

setTimeout(() => {
  window.dispatchEvent(new Event('resize'));
}, 1);

canvas {  max-width: 100%; }