Failed : Mask Implementation

Trying to implement mask using various means

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<div class="image-wrapper">
  <img src="https://pixabay.com/get/55e3dd434f56a414f1dc84609629357f113fdded504c704f752a7cd39f4ac758_640.jpg" />
</div>

SCSS

body {
  display: flex;
  font-family: sans-serif;
}

.image-wrapper {
  width: 300px;
  height: 300px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    filter: blur(10px);
  }
}

JavaScript

const src = "https://pixabay.com/get/55e3dd434f56a414f1dc84609629357f113fdded504c704f752a7cd39f4ac758_640.jpg";
/* 
const svg = "https://s3.ap-south-1.amazonaws.com/invideo-block-assets/MASKS/SVG/client01_B_2.svg"; */
const svg = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/bee.svg";

const app = new PIXI.Application({
  width: 500,
  height: 500,

  backgroundColor:0xFFFF00
})
document.body.appendChild(app.view);

/* 
	|. PIXI.CONTAINER
  	|. PIXI.SPRITE - back
    |. PIXI.SPRITE - front

*/

/* const mainContainer = new PIXI.Container();
mainContainer.width = 300;
mainContainer.height = 300;
app.stage.addChild(mainContainer);
 */

const imageContainer = new PIXI.Container();
imageContainer.width = 300;
imageContainer.height = 300;

app.stage.addChild(imageContainer);

const mask = new PIXI.Graphics();
mask.beginFill(0xFF00FF);
mask.drawRect(0, 0, 300, 300);
mask.endFill();
/* app.stage.addChild(mask); */
/* mainContainer.addChild(imageContainer); */
/* mainContainer.addChild(mask); */
/* imageContainer.mask = mask; */



const img = new PIXI.Sprite.from("https://s3.ap-south-1.amazonaws.com/invideo-block-assets/MASKS/SVG/client01_B_2.svg");
img.width = 300;
img.height = 300;
imageContainer.addChild(img);
/* imageContainer.addChild(mask); */
/* imageContainer.mask = mask; */

/* img.mask = mask; */



// app.stage.addChild(mask);
// container.mask = mask;
// strength, quality, resolution, kernelSize
const filter = new PIXI.filters.BlurFilter(10, 4, 2, 9);
/* img.filters = [filter]; */

/* Test for child/left */
// Mask from MasterJson -> SVG IMAGE
// Mask After inplace cropping

/* Test for parent */
// Mask for Animations
// Mask to avoid filter from bleeding