Use CSS transforms

1 files changed, 22 insertions, 40 deletions

diff --git a/js/game.js b/js/game.js
index 6ed44bd..f87b8a9 100644
--- a/js/game.js
+++ b/js/game.js
@@ -1,12 +1,9 @@
 class Game {
     constructor(canvas, width, height) {
-        this.buffer = document.createElement("canvas");
-        this.buffer.width = width;
-        this.buffer.height = height;
-        this.ctx = this.buffer.getContext("2d");
         this.canvas = canvas;
-        this.width = width;
-        this.height = height;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.ctx = this.canvas.getContext("2d");
 
         // override this with your data to be loaded:
         //
@@ -33,8 +30,6 @@ class Game {
             88: "b"
         };
 
-        this.scale = 1;
-
         // will store the resouces indexed by id
         this.res = {};
         this.resSize = 0;
@@ -84,16 +79,20 @@ class Game {
     _draw() {}
 
     resize() {
-        this.scale = Math.floor(window.innerHeight / this.height);
-        this.canvas.width = this.width * this.scale;
-        this.canvas.height = this.height * this.scale;
+        const scale = Math.floor(window.innerHeight / this.canvas.height);
+        this.canvas.style.imageRendering = "pixelated";
+        this.canvas.style.transformOrigin = "top";
+        this.canvas.style.transform = `scale(${scale})`;
     }
 
     loop(now) {
         let dt = Math.min(1 / this.minFps, now - this.then);
         this._update(dt);
 
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.save();
         this._draw();
+        this.ctx.restore();
 
         this.then = now;
         requestAnimationFrame((now) => {
@@ -159,32 +158,25 @@ class Game {
     // won't use drawStart/drawEnd because may render regular fonts
     drawLoading() {
         // height of the loading bar
-        const h = 20;
-
-        let ctx = this.canvas.getContext("2d");
-
-        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        ctx.save();
+        const h = 6;
 
         if (this.loadingError == true) {
-            ctx.fillStyle = "rgb(255, 128, 128)";
-            ctx.font = "caption";
-            ctx.fillText(
+            this.ctx.fillStyle = "rgb(255, 128, 128)";
+            this.ctx.font = "8px monospace";
+            this.ctx.fillText(
                 "ERROR Loading Resources",
-                Math.floor(ctx.canvas.width * 0.1),
-                Math.floor(ctx.canvas.height / 2 - h - h / 2)
+                Math.floor(this.ctx.canvas.width * 0.1),
+                Math.floor(this.ctx.canvas.height / 2 - h - h / 2)
             );
         }
 
-        ctx.fillStyle = "rgb(128, 128, 128)";
-        ctx.fillRect(Math.floor(ctx.canvas.width * 0.1), Math.floor(ctx.canvas.height / 2) - h, ctx.canvas.width - Math.floor(ctx.canvas.width * 0.2), h);
-        ctx.fillStyle = "rgb(255, 255, 255)";
-        ctx.fillRect(Math.floor(ctx.canvas.width * 0.1), Math.floor(ctx.canvas.height / 2) - h, (
-            Math.floor(ctx.canvas.resSize * (ctx.canvas.width - Math.floor(ctx.canvas.width * 0.2)) / ctx.canvas.dataSize)
+        this.ctx.fillStyle = "rgb(128, 128, 128)";
+        this.ctx.fillRect(Math.floor(this.ctx.canvas.width * 0.1), Math.floor(this.ctx.canvas.height / 2) - h, this.ctx.canvas.width - Math.floor(this.ctx.canvas.width * 0.2), h);
+        this.ctx.fillStyle = "rgb(255, 255, 255)";
+        this.ctx.fillRect(Math.floor(this.ctx.canvas.width * 0.1), Math.floor(this.ctx.canvas.height / 2) - h, (
+            Math.floor(this.ctx.canvas.resSize * (this.ctx.canvas.width - Math.floor(this.ctx.canvas.width * 0.2)) / this.ctx.canvas.dataSize)
         ), h);
 
-        ctx.restore();
-
         // we don't do this on update because we want
         // the progress bar to finish drawing
         if (this.resSize == this.dataSize) {
@@ -199,17 +191,7 @@ class Game {
 
             this.init();
             this._update = this.update;
-            this._draw = () => {
-                this.ctx.clearRect(0, 0, this.width, this.height);
-                this.draw();
-                let ctx = this.canvas.getContext("2d");
-                ctx.save();
-                ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-                ctx.imageSmoothingEnabled = false;
-                ctx.scale(this.scale, this.scale);
-                ctx.drawImage(this.buffer, 0, 0);
-                ctx.restore();
-            };
+            this._draw = this.draw;
         }
     }