How to make a canvas full screen in HTML, CSS, JS
When trying to make a canvas full screen you might think you could just write a CSS rule to resize it, like so:
right? Well it works at first but then when you resize the browser's window the canvas doesn't get resized with it. Fine then just add an event listener and resize the canvas every time the browser's window is resized:
But the problem with that is when the browser's window is resized the
window.innerHeight properties aren't actually updated. I'm aware that there are many other properties that represent the width and height of the window, but none of them seem to update either.
So how do you really make a canvas full screen?