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);
+}