如何在网格布局中调整 HTML canvas 的大小？

Question

我知道（以及为什么）调整 HTML canvas object 的大小以使内容不缩放是棘手的。 参见例如

• https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
• https://jsfiddle.net/greggman/wtcxj8n3/
• http://jsfiddle.net/dsnqr5m2/

现在，如果浏览器中 canvas 的大小由display:grid布局确定，我所看到的所有解决方案（使用简单的事件处理程序或ResizeOberserver ）似乎都不起作用。 在这种情况下，canvas 在无限循环中增长。

如何正确地做到这一点？

Answer 1

如果我理解正确，以下代码应该能够在触发调整大小事件后调整 canvas 元素的大小

window.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementsByTagName('canvas')[0]
  window.addEventListener('resize', () => {
    canvas.style.width = doSomeCalculations()
  })
})