From 1372ab3cc0ea591fbd2b86d9f7186b7e275c95b8 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Thu, 7 Apr 2022 18:27:54 +0200
Subject: [PATCH] Properly implement canvas element sizing

---
 src/main/css/main.css  |  6 ++++++
 src/main/index.html    |  2 +-
 src/main/js/Display.ts | 14 ++++----------
 src/main/js/Main.ts    | 22 ++++++++++------------
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/main/css/main.css b/src/main/css/main.css
index d521a21..2df6ead 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,3 +1,9 @@
 #canvasContainer {
     margin: 2em;
+    height: 500px;
+}
+
+#canvas {
+    width: 100%;
+    height: 100%;
 }
diff --git a/src/main/index.html b/src/main/index.html
index 0c0bb9a..28a80bd 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -50,7 +50,7 @@
 
         <section>  <!-- No `container` class, to allow use of whole width -->
             <div id="canvasContainer">
-                <canvas id="canvas" class="invisible" width="1" height="1">
+                <canvas id="canvas" class="invisible">
                     Your browser must support the &lt;canvas&gt; element to run this game.
                 </canvas>
             </div>
diff --git a/src/main/js/Display.ts b/src/main/js/Display.ts
index b727ed9..afbfc40 100644
--- a/src/main/js/Display.ts
+++ b/src/main/js/Display.ts
@@ -7,7 +7,6 @@ export class Display {
     private _painter: Painter | undefined = undefined;
     public set painter(painter: Painter) {
         this._painter = painter;
-        this.reloadPainter();
     }
 
     private isDrawing: boolean = false;
@@ -15,7 +14,6 @@ export class Display {
 
     constructor(canvas: HTMLCanvasElement) {
         this.canvas = canvas;
-        this.reloadPainter();
     }
 
 
@@ -36,12 +34,6 @@ export class Display {
     public stopDrawLoop(): void {
         this.isDrawing = false;
     }
-
-
-    public reloadPainter(): void {
-        this.canvas.width = this._painter?.getPixelWidth() ?? 1;
-        this.canvas.height = this._painter?.getPixelHeight() ?? 1;
-    }
 }
 
 
@@ -56,6 +48,7 @@ export interface Painter {
 export class GridPainter implements Painter {
     private readonly primeMath: PrimeMath = CachedPrimeMath.getInstance();
 
+    private readonly gridScale: number = 1 / 15;
     public scale: number = 15;
     public cols: number = 100;
     public max: number = 10_001;
@@ -78,14 +71,14 @@ export class GridPainter implements Painter {
         const ctx = canvas.getContext("2d")!;
 
         this.clearCanvas(ctx);
-        this.drawGrid(ctx);
         this.drawPrimes(ctx);
+        this.drawGrid(ctx);
     }
 
     private clearCanvas(ctx: CanvasRenderingContext2D): void {
         ctx.save();
         ctx.fillStyle = "#ffffff";
-        ctx.fillRect(0, 0, this.getPixelWidth(), this.getPixelHeight());
+        ctx.fillRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
         ctx.restore();
     }
 
@@ -94,6 +87,7 @@ export class GridPainter implements Painter {
         ctx.save();
         ctx.beginPath();
         ctx.strokeStyle = "#7b7b7b";
+        ctx.lineWidth = this.scale * this.gridScale;
         for (let x = 0; x <= this.cols; x++) {
             ctx.moveTo(x * this.scale, 0);
             ctx.lineTo(x * this.scale, this.rows * this.scale);
diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts
index 27ac0f3..7b36f71 100644
--- a/src/main/js/Main.ts
+++ b/src/main/js/Main.ts
@@ -23,26 +23,24 @@ doAfterLoad(async () => {
     const canvas = $("#canvas");
     canvas.classList.remove("invisible");
 
+    const resize = () => {
+        canvas.width = canvas.clientWidth;
+        canvas.height = canvas.clientHeight;
+    };
+    window.addEventListener("resize", resize, false);
+    resize();
+
     const display = new Display(canvas);
     const gridPainter = new GridPainter();
     display.painter = gridPainter;
     display.startDrawLoop();
 
     const gridCols = $("#gridCols");
-    gridCols.addEventListener("change", () => {
-        gridPainter.cols = gridCols.value;
-        display.reloadPainter();
-    });
+    gridCols.addEventListener("change", () => gridPainter.cols = gridCols.value);
 
     const gridMax = $("#gridMax");
-    gridMax.addEventListener("change", () => {
-        gridPainter.max = gridMax.value;
-        display.reloadPainter();
-    });
+    gridMax.addEventListener("change", () => gridPainter.max = gridMax.value);
 
     const gridScale = $("#gridScale");
-    gridScale.addEventListener("change", () => {
-        gridPainter.scale = gridScale.value;
-        display.reloadPainter();
-    });
+    gridScale.addEventListener("change", () => gridPainter.scale = gridScale.value);
 });