Sprite on pointerdown not tinting

Phaser 3
1

I cannot seem to get my sprite to tint…

class Metrus extends Phaser.Physics.Arcade.Image {

constructor(scene, x, y, motion, direction, distance, id) {

		unitSprite = this.scene.matter.add.gameObject(this, { shape: 'circle', circleRadius: 15} );	

	unitSprite.displayWidth = 30;
	unitSprite.displayHeight = 30;
	unitSprite.scale = 0.4;

unitSprite.setInteractive().on('pointerdown', function(pointer, localX, localY, event){

if (this.selected == true) {
			//ALREADY SELECTED
			this.clearTint();
			this.selected = false
			selectedCount--;
			
			var deleteIndex = selectedArray.indexOf(this.data.get('id'));
			selectedArray.splice(deleteIndex, 1);
			
		}else{
			//NOT YET SELECTED
			this.selected = true;	
			this.tint = 0xFF0000;
			selectedCount++;
			selectedArray.push(this.data.get('id'));
			
		}

});

}

}
2

Apparently this was an issue with my type in my game.js config, I set it to:

type: Phaser.WEBGL

and it worked