Improve the Emscripten canvas resizing situation somewhat

Author: SpaceManiac

assets/emscripten/game.html

@@ -23,19 +23,17 @@
 					<button class="js-close" aria-label="Close"></button>
 				</div>
 			</div>
-			<div id="game" class="canvas-sized" style="background: black">
-				<div id="game" class="canvas-stacker">
-					<div class="canvas-notice">
-						<img src="__HAMSANDWICH_ID__.splash.jpg" onerror="this.remove()" />
-					</div>
-					<div class="canvas-notice">
-						<div id="runstatus-notice" hidden><span></span></div>
-					</div>
-					<noscript class="canvas-notice">
-						<div><span>JavaScript is required to play this game.</span></div>
-					</noscript>
-					<canvas class="canvas" id="canvas" style="width: 640px; height: 480px" oncontextmenu="event.preventDefault()"></canvas>
+			<div class="canvas-stacker">
+				<div class="canvas-notice">
+					<img src="__HAMSANDWICH_ID__.splash.jpg" onerror="this.remove()" />
 				</div>
+				<div class="canvas-notice">
+					<div id="runstatus-notice" hidden><span></span></div>
+				</div>
+				<noscript class="canvas-notice">
+					<div><span>JavaScript is required to play this game.</span></div>
+				</noscript>
+				<canvas class="canvas" id="canvas" width="640" height="480" oncontextmenu="event.preventDefault()"></canvas>
 			</div>
 		</div>
 		<div class="window" id="menu" hidden>

assets/emscripten/ham.css

@@ -59,9 +59,6 @@ body {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-
-	--canvas-width: 640px;
-	--canvas-height: 480px;
 }
 
 .stacker {
@@ -77,28 +74,26 @@ body {
 /* Game canvas */
 .canvas-sized {
 	max-width: 100%;
-	width: var(--canvas-width);
-	height: var(--canvas-height);
+	width: 640px;
+	height: 480px;
 }
 .canvas-stacker {
-	position: relative;
 	background-color: black;
+	min-width: 640px;
+	min-height: 480px;
 }
-.canvas-stacker > * {
+.canvas-stacker > :not(.canvas) {
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 }
 .canvas {
-	position: relative;
 	margin: auto;
 	display: block;
 	border: 0px none;
 	background-color: black;
-	min-width: var(--canvas-width);
-	min-height: var(--canvas-height);
 
 	pointer-events: none;
 	opacity: 0;

source/ham/mgldraw.cpp

@@ -367,6 +367,9 @@ void MGLDraw::ResizeBuffer(int w, int h, bool clamp)
 		SDL_SetWindowPosition(window, px, py);
 	}
 	SDL_SetWindowMinimumSize(window, xRes, yRes);
+#ifdef __EMSCRIPTEN__
+	SDL_SetWindowSize(window, xRes, yRes);
+#endif
 
 	// Update mouse_x and mouse_y.
 	float scale = std::max(1.0f, std::min((float)winWidth / xRes, (float)winHeight / yRes));