Use OffscreenCanvas on supported browsers to offload canvas drawing to a service worker thread

public/scripts/canvas-worker.js

@@ -0,0 +1,135 @@
+self.onmessage = (e) => {
+    switch (e.data.type) {
+        case "createCanvas": createCanvas(e.data);
+            break;
+        case "initCanvas": initCanvas(e.data.footerOffsetHeight, e.data.clientWidth, e.data.clientHeight);
+            break;
+        case "startAnimation": startAnimation();
+            break;
+        case "onShareModeChange": onShareModeChange(e.data.active);
+            break;
+        case "switchAnimation": switchAnimation(e.data.animate);
+            break;
+    }
+};
+
+let baseColorNormal;
+let baseColorShareMode;
+let baseOpacityNormal;
+let baseOpacityShareMode;
+let speed;
+let fps;
+
+let c;
+let cCtx;
+
+let x0, y0, w, h, dw, offset;
+
+let startTime;
+let animate = true;
+let currentFrame = 0;
+let lastFrame;
+let baseColor;
+let baseOpacity;
+
+function createCanvas(data) {
+    baseColorNormal = data.baseColorNormal;
+    baseColorShareMode = data.baseColorShareMode;
+    baseOpacityNormal = data.baseOpacityNormal;
+    baseOpacityShareMode = data.baseOpacityShareMode;
+    speed = data.speed;
+    fps = data.fps;
+
+    c = data.canvas;
+    cCtx = c.getContext("2d");
+
+    lastFrame = fps / speed - 1;
+    baseColor = baseColorNormal;
+    baseOpacity = baseOpacityNormal;
+}
+
+function initCanvas(footerOffsetHeight, clientWidth, clientHeight) {
+    let oldW = w;
+    let oldH = h;
+    let oldOffset = offset;
+    w = clientWidth;
+    h = clientHeight;
+    offset = footerOffsetHeight - 28;
+    if (h > 800) offset += 11;
+
+    if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
+
+    c.width = w;
+    c.height = h;
+    x0 = w / 2;
+    y0 = h - offset;
+    dw = Math.round(Math.min(Math.max(w, h), 800) / 10);
+
+    drawFrame(currentFrame);
+}
+
+function startAnimation() {
+    startTime = Date.now();
+    animateBg();
+}
+
+function switchAnimation(state) {
+    if (!animate && state) {
+        // animation starts again. Set startTime to specific value to prevent frame jump
+        startTime = Date.now() - 1000 * currentFrame / fps;
+    }
+    animate = state;
+    requestAnimationFrame(animateBg);
+}
+
+function onShareModeChange(active) {
+    baseColor = active ? baseColorShareMode : baseColorNormal;
+    baseOpacity = active ? baseOpacityShareMode : baseOpacityNormal;
+    drawFrame(currentFrame);
+}
+
+function drawCircle(ctx, radius) {
+    ctx.lineWidth = 2;
+
+    let opacity = Math.max(0, baseOpacity * (1 - 1.2 * radius / Math.max(w, h)));
+    if (radius > dw * 7) {
+        opacity *= (8 * dw - radius) / dw
+    }
+
+    ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`;
+    ctx.beginPath();
+    ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
+    ctx.stroke();
+}
+
+function drawCircles(ctx, frame) {
+    ctx.clearRect(0, 0, w, h);
+    for (let i = 7; i >= 0; i--) {
+        drawCircle(ctx, dw * i + speed * dw * frame / fps + 33);
+    }
+}
+
+function drawFrame(frame) {
+    cCtx.clearRect(0, 0, w, h);
+    drawCircles(cCtx, frame);
+}
+
+function animateBg() {
+    let now = Date.now();
+
+    if (!animate && currentFrame === lastFrame) {
+        // Animation stopped and cycle finished -> stop drawing frames
+        return;
+    }
+
+    let timeSinceLastFullCycle = (now - startTime) % (1000 / speed);
+    let nextFrame = Math.trunc(fps * timeSinceLastFullCycle / 1000);
+
+    // Only draw frame if it differs from current frame
+    if (nextFrame !== currentFrame) {
+        drawFrame(nextFrame);
+        currentFrame = nextFrame;
+    }
+
+    requestAnimationFrame(animateBg);
+}

public/scripts/ui-main.js

@@ -333,45 +333,93 @@ class FooterUI {
 
 class BackgroundCanvas {
     constructor() {
-        this.canvas = $$('canvas');
+        this.$canvas = $$('canvas');
+        this.$footer = $$('footer');
+
         this.initAnimation();
     }
 
+    async fadeIn() {
+        this.$canvas.classList.remove('opacity-0');
+    }
+
     initAnimation() {
-        let c = this.canvas;
+        this.baseColorNormal = '168 168 168';
-        let cCtx = c.getContext('2d');
+        this.baseColorShareMode = '168 168 255';
-        let $footer = $$('footer');
+        this.baseOpacityNormal = 0.4;
+        this.baseOpacityShareMode = 0.8;
+        this.speed = 0.4;
+        this.fps = 40;
 
-        let x0, y0, w, h, dw, offset, baseColor, baseOpacity;
+        // if browser supports OffscreenCanvas
+        //      -> put canvas drawing into serviceworker to unblock main thread
+        // otherwise
+        //      -> use main thread
+        let {init, startAnimation, switchAnimation, onShareModeChange} =
+            this.$canvas.transferControlToOffscreen
+                ? this.initAnimationOffscreen()
+                : this.initAnimationOnscreen();
 
-        let offscreenCanvases = {false: [], true: []};
+        init();
-        let shareMode = false;
+        startAnimation();
+
+        // redraw canvas
+        Events.on('resize', _ => init());
+        Events.on('redraw-canvas', _ => init());
+        Events.on('translation-loaded', _ => init());
+
+        // ShareMode
+        Events.on('share-mode-changed', e => onShareModeChange(e.detail.active));
+
+        // Start and stop animation
+        Events.on('background-animation', e => switchAnimation(e.detail.animate))
+        Events.on('offline', _ => switchAnimation(false));
+        Events.on('online', _ => switchAnimation(true));
+    }
+
+    initAnimationOnscreen() {
+        let $canvas = this.$canvas;
+        let $footer = this.$footer;
+
+        let baseColorNormal = this.baseColorNormal;
+        let baseColorShareMode = this.baseColorShareMode;
+        let baseOpacityNormal = this.baseOpacityNormal;
+        let baseOpacityShareMode = this.baseOpacityShareMode;
+        let speed = this.speed;
+        let fps = this.fps;
+
+        let c;
+        let cCtx;
+
+        let x0, y0, w, h, dw, offset;
 
         let startTime;
         let animate = true;
-        let speed = 0.4;
+        let currentFrame = 0;
-        let fps = 300;
+        let lastFrame;
-        let maxFrames = fps / speed;
+        let baseColor;
+        let baseOpacity;
 
-        for (let frame = 0; frame < maxFrames; frame++) {
+        function createCanvas() {
-            let canvas = document.createElement("canvas");
+            c = $canvas;
-            offscreenCanvases[false][frame] = {
+            cCtx = c.getContext('2d');
-                "redraw": true,
+
-                "canvas": canvas
+            lastFrame = fps / speed - 1;
-            };
+            baseColor = baseColorNormal;
-            offscreenCanvases[true][frame] = {
+            baseOpacity = baseOpacityNormal;
-                "redraw": true,
-                "canvas": canvas
-            };
         }
 
         function init() {
+            initCanvas($footer.offsetHeight, document.documentElement.clientWidth, document.documentElement.clientHeight);
+        }
+
+        function initCanvas(footerOffsetHeight, clientWidth, clientHeight) {
             let oldW = w;
             let oldH = h;
-            let oldOffset = offset
+            let oldOffset = offset;
-            w = document.documentElement.clientWidth;
+            w = clientWidth;
-            h = document.documentElement.clientHeight;
+            h = clientHeight;
-            offset = $footer.offsetHeight - 28;
+            offset = footerOffsetHeight - 28;
             if (h > 800) offset += 11;
 
             if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
@@ -380,30 +428,39 @@ class BackgroundCanvas {
             c.height = h;
             x0 = w / 2;
             y0 = h - offset;
-            dw = Math.round(Math.max(w, h, 1000) / 15);
+            dw = Math.round(Math.min(Math.max(w, h), 800) / 10);
 
             drawFrame(currentFrame);
+        }
 
-            // enforce redrawing of frames
+        function startAnimation() {
-            for (let frame = 0; frame < maxFrames; frame++) {
+            startTime = Date.now();
-                offscreenCanvases[true][frame]["redraw"] = true;
+            animateBg();
-                offscreenCanvases[false][frame]["redraw"] = true;
+        }
+
+        function switchAnimation(state) {
+            if (!animate && state) {
+                // animation starts again. Set startTime to specific value to prevent frame jump
+                startTime = Date.now() - 1000 * currentFrame / fps;
             }
+            animate = state;
+            requestAnimationFrame(animateBg);
+        }
+
+        function onShareModeChange(active) {
+            baseColor = active ? baseColorShareMode : baseColorNormal;
+            baseOpacity = active ? baseOpacityShareMode : baseOpacityNormal;
+            drawFrame(currentFrame);
         }
 
         function drawCircle(ctx, radius) {
             ctx.lineWidth = 2;
 
-            baseColor = shareMode ? '168 168 255' : '168 168 168';
-            baseOpacity = shareMode ? 0.8 : 0.4;
-
             let opacity = Math.max(0, baseOpacity * (1 - 1.2 * radius / Math.max(w, h)));
-            if (radius < dw) {
+            if (radius > dw * 7) {
-                opacity *= (radius - 33) / (dw - 33)
+                opacity *= (8 * dw - radius) / dw
-            }
-            else if (radius > dw * 5) {
-                opacity *= (6 * dw - radius) / dw
             }
+
             ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`;
             ctx.beginPath();
             ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
@@ -412,39 +469,21 @@ class BackgroundCanvas {
 
         function drawCircles(ctx, frame) {
             ctx.clearRect(0, 0, w, h);
-            for (let i = 5; i >= 0; i--) {
+            for (let i = 7; i >= 0; i--) {
                 drawCircle(ctx, dw * i + speed * dw * frame / fps + 33);
             }
         }
 
-        function drawOffscreenCanvas(frame) {
-            let canvas = offscreenCanvases[shareMode][frame]["canvas"];
-            canvas.width = c.width;
-            canvas.height = c.height;
-            let ctx = canvas.getContext('2d');
-            drawCircles(ctx, frame);
-        }
-
         function drawFrame(frame) {
             cCtx.clearRect(0, 0, w, h);
-
+            drawCircles(cCtx, frame);
-            if (offscreenCanvases[shareMode][frame]["redraw"]) {
-                drawOffscreenCanvas(frame);
-            }
-            cCtx.drawImage(offscreenCanvases[shareMode][frame]["canvas"], 0, 0);
         }
 
-        function startAnimating() {
-            startTime = Date.now();
-            animateBg();
-        }
-
-        let currentFrame = 0;
         function animateBg() {
             let now = Date.now();
 
-            if (!animate) {
+            if (!animate && currentFrame === lastFrame) {
-                // Animation stopped -> don't draw next frame
+                // Animation stopped and cycle finished -> stop drawing frames
                 return;
             }
 
@@ -460,38 +499,62 @@ class BackgroundCanvas {
             requestAnimationFrame(animateBg);
         }
 
-        function switchAnimation(state) {
+        createCanvas();
-            if (!animate && state) {
-                // animation starts again. Set startTime to specific value to prevent frame jump
-                startTime = Date.now() - 1000 * currentFrame / fps;
-            }
-            animate = state;
-            animateBg();
-        }
 
-        function redrawOnShareModeChange(active) {
+        return {init, startAnimation, switchAnimation, onShareModeChange};
-            shareMode = active
-        }
-
-        init();
-        startAnimating();
-
-        // redraw canvas
-        Events.on('resize', _ => init());
-        Events.on('redraw-canvas', _ => init());
-        Events.on('translation-loaded', _ => init());
-
-        // ShareMode
-        Events.on('share-mode-changed', e => redrawOnShareModeChange(e.detail.active));
-
-        // Start and stop animation
-        Events.on('background-animation', e => switchAnimation(e.detail.animate))
-
-        Events.on('offline', _ => switchAnimation(false));
-        Events.on('online', _ => switchAnimation(true));
     }
 
-    async fadeIn() {
+    initAnimationOffscreen() {
-        this.canvas.classList.remove('opacity-0');
+        console.log("Use OffscreenCanvas to draw background animation.")
+
+        let baseColorNormal = this.baseColorNormal;
+        let baseColorShareMode = this.baseColorShareMode;
+        let baseOpacityNormal = this.baseOpacityNormal;
+        let baseOpacityShareMode = this.baseOpacityShareMode;
+        let speed = this.speed;
+        let fps = this.fps;
+        let $canvas = this.$canvas;
+        let $footer = this.$footer;
+
+        const offscreen = $canvas.transferControlToOffscreen();
+        const worker = new Worker("scripts/canvas-worker.js");
+
+        function createCanvas() {
+            worker.postMessage({
+                type: "createCanvas",
+                canvas: offscreen,
+                baseColorNormal: baseColorNormal,
+                baseColorShareMode: baseColorShareMode,
+                baseOpacityNormal: baseOpacityNormal,
+                baseOpacityShareMode: baseOpacityShareMode,
+                speed: speed,
+                fps: fps
+            }, [offscreen]);
+        }
+
+        function init() {
+            worker.postMessage({
+                type: "initCanvas",
+                footerOffsetHeight: $footer.offsetHeight,
+                clientWidth: document.documentElement.clientWidth,
+                clientHeight: document.documentElement.clientHeight
+            });
+        }
+
+        function startAnimation() {
+            worker.postMessage({ type: "startAnimation" });
+        }
+
+        function onShareModeChange(active) {
+            worker.postMessage({ type: "onShareModeChange", active: active });
+        }
+
+        function switchAnimation(animate) {
+            worker.postMessage({ type: "switchAnimation", animate: animate });
+        }
+
+        createCanvas();
+
+        return {init, startAnimation, switchAnimation, onShareModeChange};
     }
 }

public/service-worker.js

@@ -17,6 +17,7 @@ const relativePathsToCache = [
     'scripts/ui-main.js',
     'scripts/util.js',
     'scripts/zip.min.js',
+    'scripts/canvas-worker.js',
     'sounds/blop.mp3',
     'sounds/blop.ogg',
     'images/favicon-96x96.png',