gradient_test.js

  generateNLTexture() {
    this.mainBMD = new Phaser.BitmapData(this.game, this.game.rnd.uuid().toString(), this.thickness, this.length);
    this.mainBMD.context.fillStyle = this.buildGradient(this.mainBMD.context);
    this.mainBMD.context.fillRect(0, 0, this.thickness, this.length);

    this.maskBMD = new Phaser.BitmapData(this.game, this.game.rnd.uuid().toString(), this.thickness, this.length);
    this.maskBMD.context.fillStyle = this.buildMask(this.maskBMD.context);
    this.maskBMD.context.fillRect(0, 0, this.thickness, this.length);

    this.texBMD = new Phaser.BitmapData(this.game, this.game.rnd.uuid().toString(), this.thickness, this.length);
    // this.texBMD.draw(this.mainBMD); // this works ok
    this.texBMD.alphaMask(this.mainBMD, this.maskBMD); // this doesn't
    return this.texBMD.texture;
  }

  buildGradient(context: CanvasRenderingContext2D) {
    let gradient = context.createLinearGradient(0, 0, this.thickness, 0);
    gradient.addColorStop(0, "rgba(60,10,200,0)");
    gradient.addColorStop(0.41, "rgba(60,10,200,0.6)");
    gradient.addColorStop(0.5, "rgba(60,10,200,1)");
    gradient.addColorStop(0.59, "rgba(60,10,200,0.6)");
    gradient.addColorStop(1, "rgba(60,10,200,0)");
    return gradient;
  }

  buildMask(context: CanvasRenderingContext2D) {
    let gradient = context.createLinearGradient(0, 0, 0, this.length);
    gradient.addColorStop(0, "rgba(255,255,255,0)");
    gradient.addColorStop(0.3, "rgba(255,255,255,0.8)");
    gradient.addColorStop(0.5, "rgba(255,255,255,1)");
    gradient.addColorStop(0.7, "rgba(255,255,255,0.8)");
    gradient.addColorStop(1, "rgba(255,255,255,0)");
    return gradient;
  }