More efficient way to do this (masking)?

[BattyMilk]

I am trying to create functionality similar to a scratch off lottery ticket: you have an image in the background with another over the top and you can scratch off the top layer to reveal what lies underneath. 

 

So far I have come up with the below. It works fine in very up to date devices and in the iOS simulator, but is completely unusable (slow to respond) in anything less than cutting edge. Does anyone have any suggestions how this could be improved for better performance or alternatively, a completely different way to tackle the situation?

var scratchState = {create: function(){   this.maskPoint = game.add.image(0,0,'mask');   this.bmd = game.add.bitmapData(game.width, game.height);this.bmd.addToWorld();   this.bmd.smoothed = false;   game.input.addMoveCallback(this.scratch, this);},update: function(){ },scratch: function(pointer,x,y){if (pointer.isDown){if (this.activeMask){this.activeMask.destroy();}this.bmd.draw(this.maskPoint,x-50,y-50);this.mask = game.make.bitmapData(game.width, game.height);this.mask.alphaMask('atlas2', this.bmd);this.activeMask = game.add.image(0,0,this.mask);}}}

[BattyMilk]

I've also tried an alternative way to get the effect I need:

 

var scratchState2 = {create: function(){this.sprite = game.add.sprite(0,0,'backgroundimage');game.input.addMoveCallback(this.scratch, this);this.myMask = new Phaser.Graphics();},update: function(){ },scratch: function(pointer,x,y){this.sprite.mask = null;this.myMask.beginFill();this.myMask.drawCircle(x-50,y-50,300);this.myMask.endFill();this.sprite.mask = this.myMask;}}

 

Which works in WEBGL but Canvas is giving me the warning "Pixi.js warning: masks in canvas can only mask using the first path in the graphics object" and no further areas are masked.

[jouniii]

Maybe your problem is that the move event is called too ofter. Try to cache it's data and only scratch in batches instead of scatching everything (and redo already scratched position).

 

I'm not familiar with masks as you point out they use much CPU power.  Also you seem to create new image everytime instead of updating existing one (if that's even possible). That's of course expensive task.