Speed up canvas by removing fade-in animation

public/index.html

@@ -303,6 +303,7 @@
         </section>
         <x-background></x-background>
     </x-about>
+    <canvas class="circles"></canvas>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">

public/scripts/ui.js

@@ -2249,14 +2249,7 @@ window.addEventListener('beforeinstallprompt', e => {
 
 // Background Circles
 Events.on('load', () => {
-    let c = document.createElement('canvas');
+    let c = $$('canvas');
-    let style = c.style;
-    style.width = '100%';
-    style.position = 'absolute';
-    style.zIndex = -1;
-    style.top = 0;
-    style.left = 0;
-    style.animation = "fade-in 800ms";
     let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
@@ -2277,11 +2270,7 @@ Events.on('load', () => {
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
 
-        if (document.body.contains(c)) {
-            document.body.removeChild(c);
-        }
         drawCircles(cCtx, dw);
-        document.body.appendChild(c);
     }
 
     Events.on('bg-resize', _ => init());
@@ -2297,6 +2286,7 @@ Events.on('load', () => {
     }
 
     function drawCircles(ctx, frame) {
+        ctx.clearRect(0, 0, w, h);
         for (let i = 0; i < 13; i++) {
             drawCircle(ctx, dw * i + frame + 33);
         }

public/styles.css

@@ -1178,6 +1178,14 @@ button::-moz-focus-inner {
     align-self: end;
 }
 
+canvas .circles {
+    width: 100vw;
+    position: absolute;
+    z-index: -10;
+    top: 0;
+    left: 0;
+}
+
 /* Loading Indicator */
 
 .progress {

public_included_ws_fallback/index.html

@@ -306,6 +306,7 @@
         </section>
         <x-background></x-background>
     </x-about>
+    <canvas class="circles"></canvas>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">

public_included_ws_fallback/scripts/ui.js

@@ -2250,14 +2250,7 @@ window.addEventListener('beforeinstallprompt', e => {
 
 // Background Circles
 Events.on('load', () => {
-    let c = document.createElement('canvas');
+    let c = $$('canvas');
-    let style = c.style;
-    style.width = '100%';
-    style.position = 'absolute';
-    style.zIndex = -1;
-    style.top = 0;
-    style.left = 0;
-    style.animation = "fade-in 800ms";
     let cCtx = c.getContext('2d');
     let x0, y0, w, h, dw, offset;
 
@@ -2277,11 +2270,7 @@ Events.on('load', () => {
         y0 = h - offset;
         dw = Math.round(Math.max(w, h, 1000) / 13);
 
-        if (document.body.contains(c)) {
-            document.body.removeChild(c);
-        }
         drawCircles(cCtx, dw);
-        document.body.appendChild(c);
     }
 
     Events.on('bg-resize', _ => init());
@@ -2297,6 +2286,7 @@ Events.on('load', () => {
     }
 
     function drawCircles(ctx, frame) {
+        ctx.clearRect(0, 0, w, h);
         for (let i = 0; i < 13; i++) {
             drawCircle(ctx, dw * i + frame + 33);
         }

public_included_ws_fallback/styles.css

@@ -1204,6 +1204,14 @@ button::-moz-focus-inner {
     align-self: end;
 }
 
+canvas .circles {
+    width: 100vw;
+    position: absolute;
+    z-index: -10;
+    top: 0;
+    left: 0;
+}
+
 /* Loading Indicator */
 
 .progress {