JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/pixijs/pixi.js/master/bin/pixi.js"></script>

JavaScript

var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);


var gfx = new PIXI.Graphics();
gfx.lineStyle(5,0xFF0000);
gfx.beginFill(0x880000);
gfx.drawRect(0,0,100,100);
gfx.endFill();
gfx.position.x = 100;
gfx.position.y = 100;

stage.addChild(gfx);


var mask = new PIXI.Graphics();
mask.beginFill(0x000000);
//mask.drawRect(0,0,50,50); // i would have thought this would have worked
mask.drawRect(gfx.position.x,gfx.position.y,50,50); // instead it seems i have to draw at the gfxs position
mask.endFill();

// and this would be needed
//mask.position.x = gfx.position.x;
//mask.position.y = gfx.position.y;
// it also cuts off the borders, which should be 5px thick
gfx.mask = mask;

document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimationFrame(render);

function render() {
    var rx = Math.floor((Math.random() * window.innerWidth - 100) + 100); 
    var ry = Math.floor((Math.random() * window.innerHeight - 100) + 100); 
    gfx.position.x = rx;
    gfx.position.y = ry;
    
    mask.beginFill(0x000000);
	mask.drawRect(gfx.position.x,gfx.position.y,50,50);
	mask.endFill();
    
	requestAnimationFrame(render);
	renderer.render(stage);
}