Dynamically size canvas

3 files changed, 26 insertions, 28 deletions

diff --git a/src/renderer/index.css b/src/renderer/index.css
index afdf217..672c410 100644
--- a/src/renderer/index.css
+++ b/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;
 }
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index 039c3b6..1fa9956 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -10,12 +10,17 @@ window.onload = async () => {
 		return;
 
 	const canvas = document.createElement('canvas');
-	canvas.width = 1024;
-	canvas.height = 768;
+	const renderer = new Renderer(canvas);
 
-	app.append(canvas);
+	const resize = () => {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		renderer.resize();
+	};
+	window.addEventListener('resize', resize);
+	resize();
 
-	const renderer = new Renderer(canvas);
+	app.append(canvas);
 
 	GameContext.load(renderer);
 };
diff --git a/src/renderer/view/renderer/renderer.ts b/src/renderer/view/renderer/renderer.ts
index 93f8589..9f711d3 100644
--- a/src/renderer/view/renderer/renderer.ts
+++ b/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,27 +72,29 @@ export class Renderer {
 		vec2.scale(out, out, 1 / this.coordScale);
 	}
 
-	private mkContext(): WebGLRenderingContext {
-		const gl = (
-			this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl')
-		);
-		if (!gl)
-			throw new Error('unable to initialize WebGL context');
-
-		return gl;
-	}
-
-	private setSize(): void {
+	public resize(): void {
 		const w = this.canvas.width;
 		const h = this.canvas.height;
+		const ws = nextPowerOf2(w);
+		const hs = nextPowerOf2(h);
 
-		this.gl.viewport(0, 0, w, 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 / w, -2 * scale / h, 1.0]);
+		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')
+		);
+		if (!gl)
+			throw new Error('unable to initialize WebGL context');
+
+		return gl;
+	}
 }