Image Masking - PixiJS

In this code base, I have developed a circle mask using PIXI js. https://mudassirali.com

by mudassirali

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.2/browser/pixi.js"></script>

JavaScript

const app = new PIXI.Application({ antialias: true, backgroundColor : 0x1099bb });
document.body.appendChild(app.view);

let square = new PIXI.Graphics();
square.beginFill(0x660000);
square.drawRect(0, 0, 200, 150);
square.endFill();
app.stage.addChild(square);


let circle = new PIXI.Graphics();
circle.lineStyle(0); 
circle.beginFill(0x66ffcc, 1);
circle.drawCircle(90, 75, 70);
circle.endFill();
app.stage.addChild(circle);

square.mask = transparentmask(circle);

function transparentmask(circle){
//fresh white sprite
let sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
sprite.tint = 0xffffff;
sprite.x = 0;
sprite.y = 0;
sprite.width = 200;
sprite.height = 150;
//this will do the trick
sprite.blendMode = PIXI.BLEND_MODES.SRC_IN;
  
let originalContainer = new PIXI.Container();
originalContainer.addChild(circle);
originalContainer.addChild(sprite);
let genTexture = app.renderer.generateTexture(originalContainer);
return new PIXI.Sprite(genTexture);
}