fix(graphics): viewpoint size is now based on actual canvas size

tomaisthorpe · Sep 5, 2023 · 062c6bc · 062c6bc
1 parent 046a475
commit 062c6bc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/hot-planes-peel.md b/.changeset/hot-planes-peel.md
@@ -0,0 +1,5 @@
+---
+'@tedengine/ted': patch
+---
+
+Fix WebGL viewpoint size using document size instead of canvas size
diff --git a/packages/ted/src/fred/fred.ts b/packages/ted/src/fred/fred.ts
@@ -192,8 +192,14 @@ export default class TFred {
   private onResize() {
     // @todo call this on window resize
     if (this.canvas) {
+      // This is the size that WebGL will render at
+      // On High DPI screens, this should be increased, e.g. * 2
       this.canvas.width = this.container.clientWidth;
       this.canvas.height = this.container.clientHeight;
+
+      // This is the size that the canvas itself displays as in the browser
+      this.canvas.style.width = `${this.container.clientWidth}px`;
+      this.canvas.style.height = `${this.container.clientHeight}px`;
     }
 
     if (this.renderer) {

diff --git a/packages/ted/src/renderer/renderer.ts b/packages/ted/src/renderer/renderer.ts
@@ -52,7 +52,7 @@ export default class TRenderer {
     gl.enable(gl.DEPTH_TEST);
     gl.depthFunc(gl.LEQUAL);
 
-    gl.viewport(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
 
     this.colorProgram = new TColorProgram(this, this.resourceManager);
     await this.colorProgram.load();
@@ -179,7 +179,7 @@ export default class TRenderer {
 
   public onResize() {
     const gl = this.context();
-    gl.viewport(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
   }
 
   private generateProjectionMatrix(