Failed: Backdrop generation for Blend mode

An attempt to pick the texture of the backdrop for blend mode

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
x: <input type="range" id="move-x" min=0 max=400 value=0 steps=1 />
y: <input type="range" id="move-y" min=0 max=400 value=0 steps=1 />

JavaScript

const src = "https://pixabay.com/get/55e3dd434f56a414f1dc84609629357f113fdded504c704f752a7cd39f4ac758_640.jpg";
const app = new PIXI.Application({
  width: 1000,
  height: 1000,
  transparent: true
})

document.body.appendChild(app.view)
const img = new PIXI.Sprite.from(src)
img.width = 400;
img.height = 400;
app.stage.addChild(img)

const circle = new PIXI.Graphics()
				.beginFill(0xFF0000)
        .drawCircle(150, 150, 80)
        .endFill();
app.stage.addChild(circle)

const small = new PIXI.Sprite.from(src)
small.width = 100;
small.height = 100;
app.stage.addChild(small)

const focus = new PIXI.Sprite(null);
focus.x = 150
focus.y = 450
app.stage.addChild(focus);

move(0, 0)

function move(x, y) {
if (x != undefined) {
	small.x = x;
}
if (y != undefined) {
	small.y = y;
}
const bounds = new PIXI.Rectangle(
	small.x, small.y, 
	small.width + 10, small.height + 10);
  small.visible = false
const texture = app.renderer.generateTexture(small.parent, PIXI.SCALE_MODES.NEAREST, 1, bounds);
focus.texture = texture;
	small.visible = true
}

document.getElementById("move-x").oninput = (e) => {
	const offset = parseInt(e.target.value);
  move(offset, undefined)
};
document.getElementById("move-y").oninput = (e) => {
	const offset = parseInt(e.target.value);
  move(undefined, offset)
};