PIXI.js Graphics reduce, or set mask for mask

I want to achieve a scratch effect,An effect similar to this:

Now I can increase the area of Graphics through events to increase the visible range, but I still need to make the visible range smaller. What do I need to do to reduce the area of Graphics?

this is my code:

import {
    FederatedPointerEvent,
    Graphics, LINE_CAP, LINE_JOIN, Point, type Application,
    Sprite,
    Assets
} from "pixi.js"

import data from './data'
export async function useTink(app: Application) {
    const ids = (await Assets.load('../images/treasureHunter.json')).textures

    console.log(ids)
    const dungeon = Sprite.from(ids['dungeon.png'])

    app.stage.addChild(dungeon)


    const graphics = new Graphics()
    graphics.lineStyle({
        width: 80,
        color: 0xff8888,
        alpha: 1,
        cap: LINE_CAP.ROUND,
    })
    for (let i = 0; i < data.length - 1; i++) {
        const item = data[i];
        graphics.moveTo(item[0], item[1])
        graphics.lineTo(data[i + 1][0], data[i + 1][1])
    }

    if (data.length > 1) {
        graphics.lineTo(data[data.length - 1][0], data[data.length - 1][1])
    }
    dungeon.mask = graphics

    app.stage.addChild(graphics)
    app.stage.eventMode = 'static'
    app.stage.cursor = 'crosshair'
    let drawing = false

    let start = { x: 0, y: 0 }
    const points: number[][] = []
    app.stage.on("pointerdown", (event: FederatedPointerEvent) => {
        drawing = true
        start.x = event.global.x
        start.y = event.global.y
    })

    app.stage.on("pointermove", (event: FederatedPointerEvent) => {
        if (drawing) {
            points.push([start.x, start.y])
            graphics.moveTo(start.x, start.y)
            graphics.lineTo(event.global.x, event.global.y)
            start.x = event.global.x
            start.y = event.global.y
        }
    })
    app.stage.on("pointerup", (event: FederatedPointerEvent) => {
        drawing = false
    })
}

this is example data:

Thank you so much.