From 8551a8546ac64719d4224cd2e1f6a5e094614503 Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Fri, 23 Dec 2016 23:41:41 +0100
Subject: [PATCH] fix #369 improve perf of grid rendering

---
 src/js/rendering/frame/FrameRenderer.js | 30 ++++++++++++++-----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js
index 15154e00..538025b9 100644
--- a/src/js/rendering/frame/FrameRenderer.js
+++ b/src/js/rendering/frame/FrameRenderer.js
@@ -261,27 +261,31 @@
       this.margin.y - this.offset.y * z
     );
 
+    // Scale up to draw the canvas content
+    displayContext.scale(z, z);
+
     if (pskl.UserSettings.get('SEAMLESS_MODE')) {
-      displayContext.clearRect(-1 * w * z, -1 * h * z, 3 * w * z, 3 * h * z);
+      displayContext.clearRect(-1 * w, -1 * h, 3 * w, 3 * h);
     } else {
-      displayContext.clearRect(0, 0, w * z, h * z);
+      displayContext.clearRect(0, 0, w, h);
     }
 
+    if (pskl.UserSettings.get('SEAMLESS_MODE')) {
+      this.drawTiledFrames_(displayContext, this.canvas, w, h, 1);
+    }
+    displayContext.drawImage(this.canvas, 0, 0);
+
+    // Draw grid.
     var gridWidth = this.computeGridWidthForDisplay_();
     if (gridWidth > 0) {
-      var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, z, gridWidth);
-
-      if (pskl.UserSettings.get('SEAMLESS_MODE')) {
-        this.drawTiledFrames_(displayContext, scaled, w, h, z);
+      // Scale out before drawing the grid.
+      displayContext.scale(1 / z, 1 / z);
+      for (var i = 1 ; i < frame.getWidth() ; i++) {
+        displayContext.clearRect((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
       }
-      displayContext.drawImage(scaled, 0, 0);
-    } else {
-      displayContext.scale(z, z);
-
-      if (pskl.UserSettings.get('SEAMLESS_MODE')) {
-        this.drawTiledFrames_(displayContext, this.canvas, w, h, 1);
+      for (var i = 1 ; i < frame.getHeight() ; i++) {
+        displayContext.clearRect(0, (i * z) - (gridWidth / 2), w * z, gridWidth);
       }
-      displayContext.drawImage(this.canvas, 0, 0);
     }
 
     displayContext.restore();