How can I detect when the line has crossed both sides of my curve?

Is there a way of detecting when the line (drawn by the mouse) has interseted both sides of the curve? The aim of my game is for the user to successfully cut the object using the mouse.[]

let level4;
window.onload = function() {
    let gameConfig = {
        transparent: true,
        type: Phaser.AUTO,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 600,
            height: 700
        },
        scene: scene4,
        physics: {
            default: "matter",
            matter: {
                gravity: {
                    y: 0
                },
                debug: true,
            }
        }
    }
    level4 = new Phaser.Game(gameConfig);
    window.focus();
}
let levelText;
class scene4 extends Phaser.Scene{
    constructor(){
        super();
    }


    create(){
        const graphics = this.add.graphics();

        const path = new Phaser.Curves.Path(0, 300);

        for (let i = 0; i < 8; i++)
        {
            // xRadius, yRadius, startAngle, endAngle, clockwise, rotation
            if (i % 2 === 0)
            {
                path.ellipseTo(50, 80, 180, 360, true, 0);
            }
            else
            {
                path.ellipseTo(50, 80, 180, 360, false, 0);
            }
        }

        graphics.lineStyle(40, 0xff0000, 1);

        path.draw(graphics);




        this.lineGraphics = this.add.graphics();
        this.input.on("pointerdown", this.startDrawing, this);
        this.input.on("pointerup", this.stopDrawing, this);
        this.input.on("pointermove", this.keepDrawing, this);
        this.isDrawing = false;
        levelText = this.add.text(13, 11, 'Level 4',{fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif'});

    }
           
    startDrawing(){
        this.isDrawing = true;
    }
    keepDrawing(pointer){
        if(this.isDrawing){
            this.lineGraphics.clear();
            this.lineGraphics.lineStyle(5, 'black');
            this.lineGraphics.moveTo(pointer.downX, pointer.downY);
            this.lineGraphics.lineTo(pointer.x, pointer.y);
            this.lineGraphics.strokePath();
        }
    }

    updateLine(){
        //this.lineGraphics.clear();
        this.lineGraphics.lineStyle(15, 'black');
        this.lineGraphics.moveTo(linePoints[0].x, linePoints[0].y);
        for(var i = 1; i < linePoints.length; i++) {
            this.lineGraphics.lineTo(linePoints[i].x, linePoints[i].y);
        }
        this.lineGraphics.strokePath();
    }
    

    stopDrawing(pointer){
        if (????){
            this.isDrawing = false;
            levelText.setVisible(false);
            this.add.text(190, 300, 'Level 4 complete!',{fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontSize: '60px'}).bringToTop();
            }
        };
};type here

Any help would be much appreciated.

After the line has sucessfully cut the curve I would like "Level 4 complete to be printed".

Via Active questions tagged javascript - Stack Overflow https://ift.tt/jwCS4E2