Dynamically size canvas

src/renderer/index.css

@@ -3,18 +3,10 @@ html, body, div {
 	height: 100%;
 }
 
-#app {
-	text-align: center;
-}
-
-canvas {
-	position: relative;
-	top: calc(50% - 384px);
-}
-
 * {
 	margin: 0px;
 	padding: 0px;
 	border: 0px;
 	background: #223;
+	overflow: hidden;
 }

src/renderer/index.ts

@@ -10,12 +10,17 @@ window.onload = async () => {
 		return;
 
 	const canvas = document.createElement('canvas');
-	canvas.width = 1024;
+	const renderer = new Renderer(canvas);
-	canvas.height = 768;
+
+	const resize = () => {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		renderer.resize();
+	};
+	window.addEventListener('resize', resize);
+	resize();
 
 	app.append(canvas);
 
-	const renderer = new Renderer(canvas);
-
 	GameContext.load(renderer);
 };

src/renderer/view/renderer/renderer.ts

@@ -1,3 +1,4 @@
+import { nextPowerOf2 } from '../../util';
 import { Shaders } from './shaders';
 
 import { mat4, vec2 } from 'gl-matrix';
@@ -23,8 +24,6 @@ export class Renderer {
 		this.gl.enable(this.gl.BLEND);
 		this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
 		this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
-
-		this.setSize();
 	}
 
 	public createBuffer(): WebGLBuffer {
@@ -73,6 +72,22 @@ export class Renderer {
 		vec2.scale(out, out, 1 / this.coordScale);
 	}
 
+	public resize(): void {
+		const w = this.canvas.width;
+		const h = this.canvas.height;
+		const ws = nextPowerOf2(w);
+		const hs = nextPowerOf2(h);
+
+		this.gl.viewport((w - ws) / 2, (h - hs) / 2, ws, hs);
+		this.clear();
+
+		const scale = this.viewScale * this.coordScale;
+
+		mat4.identity(this.viewport);
+		mat4.scale(this.viewport, this.viewport, [2 * scale / ws, -2 * scale / hs, 1.0]);
+		this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport);
+	}
+
 	private mkContext(): WebGLRenderingContext {
 		const gl = (
 			this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl')
@@ -82,18 +97,4 @@ export class Renderer {
 
 		return gl;
 	}
-
-	private setSize(): void {
-		const w = this.canvas.width;
-		const h = this.canvas.height;
-
-		this.gl.viewport(0, 0, w, h);
-		this.clear();
-
-		const scale = this.viewScale * this.coordScale;
-
-		mat4.identity(this.viewport);
-		mat4.scale(this.viewport, this.viewport, [2 * scale / w, -2 * scale / h, 1.0]);
-		this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport);
-	}
 }