Make the blur as-close to the css one as possible

res/css/structures/_BackdropPanel.scss

@@ -29,7 +29,7 @@ limitations under the License.
     top: 0;
     height: 100vh;
     width: 100%;
-    background-color: rgba(255, 255, 255, .02);
+    background-color: rgba(255, 255, 255, .055);
   }
 }
 
@@ -42,10 +42,10 @@ limitations under the License.
     pointer-events: none;
     overflow: hidden;
 
-    &:first-of-type {
+    &:nth-of-type(2n-1) {
-      opacity: 0.19;
+      opacity: 0.2;
     }
-    &:last-of-type {
+    &:nth-of-type(2n) {
-      opacity:0.12;
+      opacity:0.1;
     }
 }

res/themes/dark/css/_dark.scss

@@ -240,8 +240,8 @@ $appearance-tab-border-color: $room-highlight-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 :root {
-    --roomlist-background-blur-amount: 60px;
+    --llp-background-blur: 60px;
-    --groupFilterPanel-background-blur-amount: 30px;
+    --lp-background-blur: 30px;
 }
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);

res/themes/light/css/_light.scss

@@ -363,8 +363,8 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 :root {
-    --roomlist-background-blur-amount: 40px;
+    --llp-background-blur: 40px;
-    --groupFilterPanel-background-blur-amount: 20px;
+    --lp-background-blur: 20px;
 }
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 

src/components/structures/BackdropPanel.tsx

@@ -78,16 +78,14 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
     };
 
     private refreshBackdropImage = (): void => {
-        const spacesCtx = this.leftLeftPanelRef.current.getContext("2d");
+        const leftLeftPanelContext = this.leftLeftPanelRef.current.getContext("2d");
-        const roomListCtx = this.leftPanelRef.current.getContext("2d");
+        const leftPanelContext = this.leftPanelRef.current.getContext("2d");
         const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes;
         const width = leftLeftPanelWidth + leftPanelWidth;
         const { backgroundImage } = this.props;
 
-        const imageWidth = (backgroundImage as ImageBitmap).width
+        const imageWidth = (backgroundImage as ImageBitmap).width;
-        || (backgroundImage as HTMLImageElement).naturalWidth;
+        const imageHeight = (backgroundImage as ImageBitmap).height;
-        const imageHeight = (backgroundImage as ImageBitmap).height
-        || (backgroundImage as HTMLImageElement).naturalHeight;
 
         const contentRatio = imageWidth / imageHeight;
         const containerRatio = width / height;
@@ -101,7 +99,9 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             resultHeight = width / contentRatio;
         }
 
-        const x = (width - resultWidth) / 2;
+        // This value has been chosen to be as close with rendering as the css-only
+        // backdrop-filter: blur effect was, mostly takes effect for vertical pictures.
+        const x = width * 0.1;
         const y = (height - resultHeight) / 2;
 
         this.leftLeftPanelRef.current.width = leftLeftPanelWidth;
@@ -110,12 +110,12 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
         this.leftPanelRef.current.height = height;
         this.leftPanelRef.current.style.transform = `translateX(${leftLeftPanelWidth}px)`;
 
-        const spacesBlur = this.style.getPropertyValue('--roomlist-background-blur-amount');
+        const spacesBlur = this.style.getPropertyValue('--llp-background-blur');
-        const roomListBlur = this.style.getPropertyValue('--groupFilterPanel-background-blur-amount');
+        const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
 
-        spacesCtx.filter = `blur(${spacesBlur})`;
+        leftLeftPanelContext.filter = `blur(${spacesBlur})`;
-        roomListCtx.filter = `blur(${roomListBlur})`;
+        leftPanelContext.filter = `blur(${roomListBlur})`;
-        spacesCtx.drawImage(
+        leftLeftPanelContext.drawImage(
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
@@ -124,7 +124,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             resultWidth,
             resultHeight,
         );
-        roomListCtx.drawImage(
+        leftPanelContext.drawImage(
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
@@ -146,13 +146,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             <img
                 className="mx_BackdropPanel--canvas"
                 style={{
-                    opacity: .19,
                 }}
                 src={this.state.llpImage} />
             <img
                 className="mx_BackdropPanel--canvas"
                 style={{
-                    opacity: .12,
                 }}
                 src={this.state.lpImage} />
             <canvas
@@ -161,14 +159,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
                 className="mx_BackdropPanel--canvas"
                 style={{
                     display: this.state.lpImage ? 'none' : 'block',
-                    opacity: .19,
                 }}
             />
             <canvas
                 style={{
                     display: this.state.lpImage ? 'none' : 'block',
-                    transform: `translateX(0)`,
-                    opacity: .12,
                 }}
                 ref={this.leftPanelRef}
                 className="mx_BackdropPanel--canvas"