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