Move backdrop filter to a canvas based solution

src/components/structures/BackdropPanel.tsx

@@ -0,0 +1,50 @@
+import React, { createRef } from "react";
+
+interface IProps {
+    width?: number;
+    height?: number;
+    backgroundImage?: ImageBitmap;
+    blur?: string;
+}
+
+
+export default class BackdropPanel extends React.PureComponent<IProps> {
+    private canvasRef: React.RefObject<HTMLCanvasElement> = createRef();
+    private ctx: CanvasRenderingContext2D;
+
+    static defaultProps = {
+        blur: "60px",
+    }
+
+    public componentDidMount() {
+        this.ctx = this.canvasRef.current.getContext("2d");
+    }
+
+    public componentDidUpdate() {
+        if (this.props.backgroundImage) {
+            requestAnimationFrame(this.refreshBackdropImage);
+        }
+    }
+
+    private refreshBackdropImage = (): void => {
+        const { width, height, backgroundImage } = this.props;
+        this.canvasRef.current.width = width;
+        this.canvasRef.current.height = height;
+
+        const destinationX = width - backgroundImage.width;
+        const destinationY = height - backgroundImage.height;
+
+        this.ctx.filter = `blur(${this.props.blur})`;
+        this.ctx.drawImage(
+            backgroundImage,
+            Math.min(destinationX, 0),
+            Math.min(destinationY, 0),
+            Math.max(width, backgroundImage.width),
+            Math.max(height, backgroundImage.height),
+        );
+    }
+
+    public render() {
+        return <canvas ref={this.canvasRef} className="mx_BackdropPanel" />;
+    }
+}