backdrop-filter test

HTML

<div class='container'>
  <img class='background' src='https://lorempixel.com/800/600/cats/'/>
  <!-- <img class='maskLayer' src='https://i.imgur.com/mXHUGrT.png'/> -->
  <div  class='maskLayer'>111
  
  </div>
  <canvas class='blurLayer' width='800' height='600'></canvas>
  <div class='modal'>Hello theres</div> 
</div>

CSS

.container {
  width: 800px;
  height: 600px;
  position: relative;
}
.background {
  position: absotlue;
}

.blurLayer {
  position: absolute;
  top: 0px;
  left: 0;
}
.maskLayer {
  /* display: none; */
  width: 500px;
  height: 200px;
}
.modal {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 1px black solid;
  border-radius: 50px;
  overflow: hidden;
  line-height: 200px;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  color: white;
}

JavaScript

var canvas = document.querySelector(".blurLayer");
var mask = document.querySelector(".maskLayer");
var background = document.querySelector(".background");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.save();

  ctx.filter='blur(10px)';
  // Draw the video feed
  ctx.drawImage(background, 0, 0);
  // Set the composite operation, which is responsible for masking
  // see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
  ctx.globalCompositeOperation = 'destination-in';

  // Apply the mask
  //ctx.drawImage(mask, 0, 0);
  ctx.filter='blur(0px)';
  ctx.drawImage(mask, (canvas.width-200)/2, (canvas.height-200)/2);

  ctx.restore(); 
}
drawMaskedVideo();