Dynamically size canvas

1 files changed, 16 insertions, 15 deletions

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;
+	}
 }