Pixi.js how to mask one image with other image

sorry for the amatuer question, I’m really new to Pixi.js

Well, I’m trying to make a scratch card.

There will be two image, one for background(“A”), and one for hidden background( “B” , I think this is mask, but I’m not sure about this terminology , so to avoid confusion I’ll describe as hidden background)

So, image ‘A’ will cover up image ‘B’.

Then, I’will use bristle image for the brush.

When I execute dragging event on Image “A” , I want to show up image ‘B” along path mouse moved.

Sorry , for my terrible description. Think I’m cloning this website ( https://art4globalgoals.com/en )

I followed this example( https://pixijs.io/examples/#/demos-advanced/scratchcard.js ), and succeed to make a brush effect, with only 1 image. But couldn’t implement it with two image.

Precisely speaking , when I run my app, there is black screen rendered , and if I scratch screen, the hidden Image appears.
but the problem is that, I want to set other Image instead of black screen.

below image is my current status , which will happen when running below code

import * as PIXI from 'pixi.js';

// const canvas = document.getElementById('webgl');

const screenSize = {
    width: window.innerWidth,
    height: window.innerHeight
};
let brushWidth = (window.innerHeight / window.innerWidth) * 200;
let brushHeight = (window.innerHeight / window.innerWidth) * 200;

// canvas.width = screenSize.width;
// canvas.height = screenSize.height;
const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    resolution: window.devicePixelRatio,
    autoDensity: true
});

document.body.appendChild(app.view);

app.loader
    .add('background', '/png/effel.png')
    .add('mask', '/png/effel-gray.png')
    .add('bristle1', '/png/brush6.png')
    .add('bristle2', '/png/bristle2.png')
    .load(() => {
        setup();
    });

const setup = () => {
    const brushTexture = app.loader.resources.bristle1.texture;
    const brushTexture2 = app.loader.resources.bristle2.texture;

    const brush = new PIXI.Sprite(brushTexture);
    const brush2 = new PIXI.Sprite(brushTexture2);

    brush.width = brushWidth;
    brush.height = brushHeight;

    brush2.width = brushWidth;
    brush2.height = brushHeight;

    const backgroundTexture = app.loader.resources.background.texture;
    const maskTexture = app.loader.resources.mask.texture;
    const background = new PIXI.Sprite(backgroundTexture);
    background.x = app.renderer.screen.width / 2;
    background.y = app.renderer.screen.height / 2;
    background.anchor.x = 0.5;
    background.anchor.y = 0.5;
    background.width = window.innerWidth;
    background.height = window.innerHeight;

    const Mask = new PIXI.Sprite(maskTexture);
    Mask.width = app.renderer.screen.width;
    Mask.height = app.renderer.screen.height;
    Mask.x = app.renderer.screen.width / 2;
    Mask.y = app.renderer.screen.height / 2;
    Mask.anchor.x = 0.5;
    Mask.anchor.y = 0.5;
    Mask.width = window.innerWidth;
    Mask.height = window.innerHeight;

    // app.stage.addChild(background);
    app.stage.addChild(Mask);

    const renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height);

    const renderTextureSprite = new PIXI.Sprite(renderTexture);

    app.stage.addChild(renderTextureSprite);

    Mask.mask = renderTextureSprite;

    app.stage.interactive = true;
    app.stage.on('pointerdown', pointerDown);
    app.stage.on('pointerup', pointerUp);
    app.stage.on('pointermove', pointerMove);

    let dragging = false;
    let bristle2Render = false;

    function pointerMove(event) {
        if (dragging) {
            brush.position.copyFrom(event.data.global);
            // brushWidth += 0.5;
            // brush.width = brushWidth;

            if (!bristle2Render) {
                setTimeout(() => (bristle2Render = true), 500);
            }

            app.renderer.render(brush, renderTexture, false, null, false);
            if (bristle2Render) {
                brush2.position.copyFrom(event.data.global);
                app.renderer.render(brush2, renderTexture, false, null, false);
            }

            // if (brush.width === 100) {
            //  dragging = false;
            //  brushWidth = 0;
            // }
        }
    }

    function pointerDown(event) {
        dragging = true;
        console.log(11);
        pointerMove(event);
    }

    function pointerUp(event) {
        dragging = false;
        bristle2Render = false;
    }

    window.addEventListener('resize', () => {
        screenSize.width = window.innerWidth;
        screenSize.height = window.innerHeight;

        app.renderer.resize(window.innerWidth, window.innerHeight);
        app.renderer.stage.width = window.innerWidth;
        app.renderer.stage.height = window.innerHeight;
    });
};
// const backgroundTexture = PIXI.Texture.from('/png/effel.png');
// const maskTexture = PIXI.Texture.from('/png/effel-gray.png');