Properly implement canvas element sizing

src/main/css/main.css

@@ -1,3 +1,9 @@
 #canvasContainer {
     margin: 2em;
+    height: 500px;
+}
+
+#canvas {
+    width: 100%;
+    height: 100%;
 }

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>

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);

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);
 });