Simplified render, use a back buffer

So we only scale once.

2 files changed, 32 insertions, 48 deletions

diff --git a/js/game.js b/js/game.js
index 85b0f91..f39a6d1 100644
--- a/js/game.js
+++ b/js/game.js
@@ -1,11 +1,12 @@
 class Game {
-    constructor(canvas) {
+    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.ctx = canvas.getContext("2d");
-
-        // override this for a differnt size
-        this.width = 320;
-        this.height = 240;
+        this.width = width;
+        this.height = height;
 
         // override this with your data to be loaded:
         //
@@ -86,10 +87,6 @@ class Game {
         this.scale = Math.floor(window.innerHeight / this.height);
         this.canvas.width = this.width * this.scale;
         this.canvas.height = this.height * this.scale;
-
-        if (this.ctx != undefined) {
-            this.ctx.imageSmoothingEnabled = false;
-        }
     }
 
     loop(now) {
@@ -159,47 +156,30 @@ class Game {
         }
     }
 
-    // erases the canvas and sets the scaling
-    drawStart() {
-        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-        this.ctx.save();
-        this.ctx.scale(this.scale, this.scale);
-    }
-
-    // restores the context
-    drawEnd() {
-        this.ctx.restore();
-    }
-
     // won't use drawStart/drawEnd because may render regular fonts
     drawLoading() {
-        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-        this.ctx.save();
-
         // height of the loading bar
-        const h = 6;
+        const h = 20;
+
+        let ctx = this.canvas.getContext("2d");
 
         if (this.loadingError == true) {
-            this.ctx.fillStyle = "rgb(255, 255, 255)";
-            this.ctx.font = "caption";
-            this.ctx.fillText(
+            ctx.fillStyle = "rgb(255, 128, 128)";
+            ctx.font = "caption";
+            ctx.fillText(
                 "ERROR Loading Resources",
-                Math.floor(this.width * 0.1 * this.scale),
-                Math.floor((this.height / 2 - h - 2) * this.scale)
+                Math.floor(ctx.canvas.width * 0.1),
+                Math.floor(ctx.canvas.height / 2 - h - h / 2)
             );
         }
 
-        this.ctx.scale(this.scale, this.scale);
-
-        this.ctx.fillStyle = "rgb(128, 128, 128)";
-        this.ctx.fillRect(Math.floor(this.width * 0.1), Math.floor(this.height / 2) - h, this.width - Math.floor(this.width * 0.2), h);
-        this.ctx.fillStyle = "rgb(255, 255, 255)";
-        this.ctx.fillRect(Math.floor(this.width * 0.1), Math.floor(this.height / 2) - h, (
-            Math.floor(this.resSize * (this.width - Math.floor(this.width * 0.2)) / this.dataSize)
+        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)
         ), h);
 
-        this.ctx.restore();
-
         // we don't do this on update because we want
         // the progress bar to finish drawing
         if (this.resSize == this.dataSize) {
@@ -214,7 +194,17 @@ class Game {
 
             this.init();
             this._update = this.update;
-            this._draw = this.draw;
+            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();
+            };
         }
     }
 
diff --git a/js/mygame.js b/js/mygame.js
index 6293150..bd5b498 100644
--- a/js/mygame.js
+++ b/js/mygame.js
@@ -4,9 +4,7 @@ const min = Math.min;
 
 class MyGame extends Game {
     constructor(canvas) {
-        super(canvas);
-        this.width = 320;
-        this.height = 240;
+        super(canvas, 320, 240);
 
         this.data = {
             sound: "snd/test.ogg",
@@ -25,8 +23,6 @@ class MyGame extends Game {
     }
 
     draw() {
-        this.drawStart();
-
         /* draw an image */
         this.ctx.drawImage(this.res.player, 0, 0);
 
@@ -34,7 +30,5 @@ class MyGame extends Game {
         if (this.keys["a"]) {
             this.playSnd(this.res.sound);
         }
-
-        this.drawEnd();
     }
 }