fixed canvas resize

src/app/components/game/game.component.css

@@ -24,10 +24,16 @@
 	align-items: center;
 	justify-content: center;
 	background: black;
+	overflow: hidden; /* Prevent canvas from causing wrapper to grow */
 }
 
 canvas {
 	display: block;
+	max-width: 100%;
+	max-height: 100%;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
 }
 
 .bottom-panel {

src/app/components/game/vis/VisMain.ts

@@ -68,14 +68,19 @@ export class VisMain {
     };
 
     public onResized() {
+        // Always get the latest wrapper size
         const width = this.wrapper.clientWidth;
         const height = this.wrapper.clientHeight;
         const ratio = window.devicePixelRatio;
+
+        // Set canvas style to always fill the wrapper
         this.canvas.width = width * ratio;
         this.canvas.height = height * ratio;
-        this.canvas.style.width = width + "px";
+
-        this.canvas.style.height = height + "px";
+        // Reset transform before scaling to avoid compounding
+        this.context.setTransform(1, 0, 0, 1, 0, 0);
         this.context.scale(ratio, ratio);
+
         this.visLevel.updateSize();
     };
 

src/styles.css

@@ -1 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body {
+	margin: 0;
+	padding: 0;
+}