From 2c72a274531c1d38ef2a9e0eaccf8cac4c8d6006 Mon Sep 17 00:00:00 2001
From: Juliusz Chroboczek <jch@irif.fr>
Date: Sat, 14 Dec 2024 02:13:59 +0100
Subject: [PATCH] Improve background blur blending.

We used blur the image then mask, which caused a halo around
the foreground.  We now mask then blur.
---
 static/galene.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/static/galene.js b/static/galene.js
index 6aa2568..7334019 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -1283,12 +1283,21 @@ let filters = {
                     ctx.canvas.height = src.videoHeight;
                 }
 
+                // set the alpha mask, background is opaque
                 ctx.globalCompositeOperation = 'copy';
-                ctx.filter = `blur(${src.videoWidth / 256}px)`;
+                ctx.filter = 'none';
                 ctx.drawImage(mask, 0, 0);
+
+                // rather than blurring the original image, we first mask
+                // the background then blur, this avoids a halo effect
                 ctx.globalCompositeOperation = 'source-in';
-                ctx.filter = `blur(${src.videoWidth / 48}px)`;
+                ctx.filter = 'none';
                 ctx.drawImage(result.bitmap, 0, 0);
+                ctx.globalCompositeOperation = 'copy';
+                ctx.filter = `blur(${src.videoWidth / 48}px)`;
+                ctx.drawImage(ctx.canvas, 0, 0);
+
+                // now draw the foreground
                 ctx.globalCompositeOperation = 'destination-atop';
                 ctx.filter = 'none';
                 ctx.drawImage(result.bitmap, 0, 0);