<div class='container'> <img class='background' src='https://lorempixel.com/800/600/cats/'/> <img class='maskLayer' src='https://i.imgur.com/mXHUGrT.png'/> <canvas class='blurLayer' width='800' height='600'></canvas> <div class='modal'>Hello theres</div> </div>
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();
.container { width: 800px; height: 600px; position: relative; } .background { position: absotlue; } .blurLayer { position: absolute; top: 0; left: 0; } .maskLayer { display: none; } .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; }