How to resize HTML canvas in grid layout?

Question

I understand that (and why) resizing an HTML canvas object exactly such that the contents do not scale is tricky. See eg

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

Now, all the solutions I have seen (using either a simple event handler or a ResizeOberserver ) do not seem to work if the size of the canvas in the browser is determined by a display:grid layout. In that case, the canvas grows in an endless loop.

How can one do this correctly?

Answer 1

If I understood it right the following code should be able to resize the canvas element after a resize event was triggered

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