Cache line highlight pattern to improve performance

Changelog.md

@@ -2,6 +2,7 @@
 New features:
 - Add "New Window" command
 - Enable files to be opened with Lightningbeam
+
 Bugfixes:
 - Fix error when an object is deleted from a frame
 - Fix parent references being lost

src/main.js

@@ -2960,20 +2960,22 @@ class BaseShape {
     ctx.lineCap = "round";
 
     // Create a repeating pattern for indicating selected shapes
-    let patternCanvas = document.createElement('canvas');
+    if (!this.patternCanvas) {
-    patternCanvas.width = 2;
+      this.patternCanvas = document.createElement('canvas');
-    patternCanvas.height = 2;
+      this.patternCanvas.width = 2;
-    let patternCtx = patternCanvas.getContext('2d');
+      this.patternCanvas.height = 2;
-    // Draw the pattern:
+      let patternCtx = this.patternCanvas.getContext('2d');
-    // black,       transparent,
+      // Draw the pattern:
-    // transparent, white
+      // black,       transparent,
-    patternCtx.fillStyle = 'black';
+      // transparent, white
-    patternCtx.fillRect(0, 0, 1, 1);
+      patternCtx.fillStyle = 'black';
-    patternCtx.clearRect(1, 0, 1, 1);
+      patternCtx.fillRect(0, 0, 1, 1);
-    patternCtx.clearRect(0, 1, 1, 1);
+      patternCtx.clearRect(1, 0, 1, 1);
-    patternCtx.fillStyle = 'white';
+      patternCtx.clearRect(0, 1, 1, 1);
-    patternCtx.fillRect(1, 1, 1, 1);
+      patternCtx.fillStyle = 'white';
-    let pattern = ctx.createPattern(patternCanvas, 'repeat'); // repeat the pattern across the canvas
+      patternCtx.fillRect(1, 1, 1, 1);
+    }
+    let pattern = ctx.createPattern(this.patternCanvas, 'repeat'); // repeat the pattern across the canvas
 
     // for (let region of this.regions) {
     //   // if (region.filled) continue;