Macroquad doesn't react to canvas element size changes

[InnocentusLime]

What is going wrong?

In WASM builds of macroquad, when you resize a canvas with JS/CSS on the fly -- it doesn't actually react to that. It is apparent by the graphics rendered in the canvas getting stretched and the fact that width and height attributes of the canvas do not get updated.

This is a problem for

• any macroquad app that doesn't have its canvas constantly as "fullscreen"
• any macroquad app that may resize its canvas without having the window resized

Cause

This might be because, if we look at the miniquad source code (https://github.com/not-fl3/miniquad/blob/master/js/gl.js) the resize reoutine is only called when onresize event is fired, which according to MDN docs (https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) fires off only when the window is resized. Not the canvas element.

Solution

not-fl3/miniquad#479 seems to have a valid fix as this issue seems to belong to miniquad and not unique to macroquad. The fix uses ResizeObserver API (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)