Use event listener to auto-resize canvas when window is resized

[Rudxain]

Problem

Currently, resizing the window or switching in-and-out of full-screen mode causes the default black background to show instead of the animation. This is awkward because it requires the user to reload the site in order to update the canvas size.

Solutions

1. Naive synchronous: Repeatedly check window size each frame, and update the canvas dimensions accordingly. This approach seems bad for performance.
2. Real-time event-oriented: A better approach is to use addEventListener to do this in an asynchronous manner. This is still not good for performance because it calls the callback function for each pixel size change which means it will be called hundreds of times per second while the user is resizing the window.
3. Damped/debounced event-oriented: This approach still waits for the size to change, but only updates the canvas size if the changes are not frequent. This is the most energy-efficient approach but it would force users to wait for the changes to be applied

[Rudxain]

This is useful: https://bencentra.com/code/2015/02/27/optimizing-window-resize.html

[Rudxain]

Now I found a rabbit hole, great!

[Rudxain]

I still need to investigate the differences between client, inner, and offset sizes. I'm closing this because the main issue is fixed