Initial canvas size

blparker · May 1, 2024 · 0a852c7 · 0a852c7
1 parent 052bfaa
commit 0a852c7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>Vimath Test</title>
   </head>
   <body>
-    <canvas id="cvs" width="880" height="520" style="border: 1px solid gray;"></canvas>
+    <!--<canvas id="cvs" width="880" height="520" style="border: 1px solid gray;"></canvas>-->
 
     <script type="module" src="/test/script_test.ts"></script>
   </body>

diff --git a/src/canvas.ts b/src/canvas.ts
@@ -264,9 +264,20 @@ class HtmlCanvas implements Canvas {
 
     private static getCanvas(canvas?: HTMLCanvasElement | string): HTMLCanvasElement {
         if (canvas === undefined) {
+            const ratio = config.canvasHeight / config.canvasWidth;
+            const bodyWidth = document.body.clientWidth;
+            let [width, height] = [config.canvasWidth, config.canvasHeight];
+
+            if (bodyWidth < config.canvasWidth) {
+                width = bodyWidth;
+                height = bodyWidth * ratio;
+                config.canvasWidth = width;
+                config.canvasHeight = height;
+            }
+
             const canvas = document.createElement('canvas');
-            canvas.width = config.canvasWidth;
-            canvas.height = config.canvasHeight;
+            canvas.width = width;
+            canvas.height = height;
             document.body.appendChild(canvas);
 
             return canvas;

diff --git a/test/script_test.ts b/test/script_test.ts
@@ -24,7 +24,7 @@ import { Scene, BaseAnimation, GridLines, Square, Text, RIGHT, LEFT, UP, DOWN, U
 import math from '../src/math';
 
 
-const cvs = document.getElementById('cvs') as HTMLCanvasElement;
+// const cvs = document.getElementById('cvs') as HTMLCanvasElement;
 
 class TestAnimation extends BaseAnimation {
     update(pctComplete: number, starting: boolean): void {
@@ -373,4 +373,5 @@ class TestScene extends Scene {
     }
 }
 
-new TestScene({ canvas: cvs }).render();
+// new TestScene({ canvas: cvs }).render();
+new TestScene().render();