mask using wrong area from spritesheet?

[timetocode]

Hello! I have a container with a buncha sprites that creates the background for my game. The background is a sandy ocean floor with procedurally varied sprites of rocks and coral. I've attached a picture of how the game looks.

You may notice that the top left quadrant of the ocean floor looks lighter and sandy. This light color is a shape which I am attempting to use as a mask. In the above image it is not set as a mask, and is merely drawn so you can see its shape (its basically a fluffy cloud made with simplex/perlin noise).

Here's the exact image but its not much to look at:

 (is it invisible? well its a fluffy white cloud with a transparent background)

When I set this image to be the mask for the background, I EXPECT the background to not be drawn in the area covered by the cloud. I had this working at some point, and the result was that it looks like the ocean gets deeper where the cloud mask is used (was awesome). INSTEAD of getting that result, I appear to be doing something wrong, because what happens is that my entire sprite sheet gets substituted as a mask. Here's what that looks like:

The ocean floor now has shapes that come from the top left corner of my spritesheet. It happens be be showing the pattern from the sprite that makes that lattice of surface waves. Something about the rectangles from the spritesheet and the mask is getting tangled.

Here is the code for the mask:

function Background() {
    PIXI.Container.call(this)

    this.cloudMask = new PIXI.Sprite.fromImage('compressed-cloud.png')
    this.addChild(this.cloudMask)
    this.mask = this.cloudMask
    
    this.cloudMask.scale.x = this.cloudMask.scale.y = 30 
    // ... rest of code adds the sand+coral+stones to 'this'
}

I've skipped the code that adds the rest of the images so as not to provide unnecessarily information. Is there something wrong with how I'm using that mask? That code produces the second screencapture (the bug). Commenting out //this.mask =this.cloudMask is what produced the first image (where the sand is just lighter in the shape of a cloud).

Thanks for reading my question.

 

Full Background.js code included below just in case:

function Background() {
    PIXI.Container.call(this)

    this.cloudMask = new PIXI.Sprite.fromImage('compressed-cloud.png')
    this.addChild(this.cloudMask)
    this.mask = this.cloudMask    
    this.cloudMask.scale.x = this.cloudMask.scale.y = 30
        
    this.floor = new PIXI.Container()
    this.layer0 = new PIXI.Container()
    this.layer1 = new PIXI.Container()
    this.layer2 = new PIXI.Container()

    this.addChild(this.floor)
    this.addChild(this.layer0)
    this.addChild(this.layer1)
    this.addChild(this.layer2)

    this.sand = new PIXI.extras.TilingSprite(
        PIXI.Texture.fromFrame('sand.jpg'), 
        1000, 
        1000
    )
    this.sand.scale.x = this.sand.scale.y = 10
    // let a little bit of the background blue color come through the sand
    this.sand.alpha = 0.5
    this.floor.addChild(this.sand)

    // add the roundish rocks
    for (var i = 0; i < 50; i++) {
        var rock = new PIXI.Sprite.fromFrame('rock.png')
        rock.anchor.x = rock.anchor.y = 0.5
        rock.scale.x = rock.scale.y =(Math.random() * 1.5) + 4
        rock.x = Math.random() * 5000
        rock.y = Math.random() * 5000
        rock.rotation = Math.random() * Math.PI * 2
        this.floor.addChild(rock)
    }

    // add the angular rocks
    for (var i = 0; i < 50; i++) {
        var rock = new PIXI.Sprite.fromFrame('rock2.png')
        rock.anchor.x = rock.anchor.y = 0.5
        rock.scale.x = rock.scale.y =(Math.random() * 1.5) + 4
        rock.x = Math.random() * 5000
        rock.y = Math.random() * 5000
        rock.rotation = Math.random() * Math.PI * 2
        this.floor.addChild(rock)
    }

    // add the first layer of coral
    for (var i = 0; i < 550; i++) {
        var coral = new PIXI.Sprite.fromFrame('coral.png')
        coral.anchor.x = coral.anchor.y = 0.5
        coral.scale.x = coral.scale.y =(Math.random() * 1.5) + 4
        coral.x = Math.random() * 5000
        coral.y = Math.random() * 5000
        coral.rotation = Math.random() * Math.PI * 2
        // disabled: tinting coral to create slightly different families
        //coral.alpha = (Math.random() * 0.5) + 1
        //coral.tint = Math.random() * 0xff1111
        this.layer0.addChild(coral)
    }

    // add the second layer of coral
    for (var i = 0; i < 550; i++) {
        var coral = new PIXI.Sprite.fromFrame('coral.png')
        coral.anchor.x = coral.anchor.y = 0.5
        coral.scale.x = coral.scale.y = (Math.random() * 1.5) + 3
        coral.x = Math.random() * 5000
        coral.y = Math.random() * 5000
        coral.rotation = Math.random() * Math.PI * 2
        //coral.alpha = (Math.random() * 0.5) + 1
        //coral.tint = Math.random() * 0xff1111
        this.layer1.addChild(coral)
    }

    // add the third layer of coral
    for (var i = 0; i < 550; i++) {
        var coral = new PIXI.Sprite.fromFrame('coral.png')
        coral.anchor.x = coral.anchor.y = 0.5
        coral.scale.x = coral.scale.y = (Math.random() * 1.5) + 2
        coral.x = Math.random() * 5000
        coral.y = Math.random() * 5000
        coral.rotation = Math.random() * Math.PI * 2
        //coral.alpha = (Math.random() * 0.5) + 1
        //coral.tint = Math.random() * 0xff1111
        this.layer2.addChild(coral)
    }

    // each layer of coral is slightly more 'solid' looking as it
    // nears the surface
    this.layer0.alpha = 0.5
    this.layer1.alpha = 0.7
    this.layer2.alpha = 0.9
}

Background.prototype = Object.create(PIXI.Container.prototype)
Background.prototype.constructor = Background

// create a subtle 3d effect as the player swims around
Background.prototype.parallax = function(x, y) {
    // bottom layer of coral does not move, and is anchored to the ground
    this.layer0.x += x * 0
    this.layer0.y += y * 0

    // second layer moves subtley
    this.layer1.x += x * 0.01
    this.layer1.y += y * 0.02

    // top layer moves a little more
    this.layer2.x += x * 0.02
    this.layer2.y += y * 0.02
}

module.exports = Background