diff --git a/src/app/components/game/game.component.css b/src/app/components/game/game.component.css index 3580d03..3eb8050 100644 --- a/src/app/components/game/game.component.css +++ b/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 { diff --git a/src/app/components/game/vis/VisMain.ts b/src/app/components/game/vis/VisMain.ts index 1c9a1ee..d62a364 100644 --- a/src/app/components/game/vis/VisMain.ts +++ b/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(); }; diff --git a/src/styles.css b/src/styles.css index 90d4ee0..0e88b70 100644 --- a/src/styles.css +++ b/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; +}