bitmapData performance issue with mobile browsers

[Jesus]

Hello all,

 

I am new to Phaser and after some tutorials, I was trying this bit of code:

<script>
            DemoState = function () {
            };

            DemoState.prototype.create = function () {
                this.p1 = new Phaser.Point(-1, -1);
                this.p2 = new Phaser.Point(0, 0);
                this.input.mouse.capture = true;
                if (game.device.desktop) {
                    this.input.activePointer.leftButton.onUp.add(this.addLine, this);
                } else {
                    this.input.onUp.add(this.addLine, this);
                }
                
                this.bmdRuler = this.add.bitmapData(430, 250);
                this.rulerSprite = this.add.sprite(0, 0, this.bmdRuler);
                this.bmdRuler.ctx.lineWidth = "20";
                this.bmdRuler.ctx.strokeStyle = "#00ffff";
                this.bmdRuler.ctx.lineCap = 'round';
                
                this.bmdMarker = this.make.bitmapData(430, 250);
                this.add.sprite(0, 0, this.bmdMarker);
                this.bmdMarker.ctx.lineWidth = "20";
                this.bmdMarker.ctx.strokeStyle = "rgba(200, 100, 100, 1)";
                this.bmdMarker.ctx.lineCap = 'round';

            };

            DemoState.prototype.addLine = function () {
                this.bmdRuler.clear();
                this.bmdMarker.ctx.beginPath();
                this.bmdMarker.ctx.moveTo(this.p1.x, this.p1.y);
                this.bmdMarker.ctx.lineTo(this.p2.x, this.p2.y);
                this.bmdMarker.ctx.stroke();
                this.bmdMarker.dirty = true;
                this.p1.set(-1, -1);
            };

            DemoState.prototype.rulerLine = function () {
                this.world.bringToTop(this.rulerSprite);
                this.bmdRuler.clear();
                this.bmdRuler.ctx.beginPath();
                this.bmdRuler.ctx.moveTo(this.p1.x, this.p1.y);
                this.bmdRuler.ctx.lineTo(this.p2.x, this.p2.y);
                this.bmdRuler.ctx.stroke();
            };

            DemoState.prototype.update = function () {
                if (this.input.activePointer.leftButton.isDown || this.input.activePointer.isDown) {
                    if (this.p1.x == -1 && this.p1.y == -1) this.p1.set(this.input.activePointer.position.x, this.input.activePointer.position.y);
                    this.p2.set(this.input.activePointer.position.x, this.input.activePointer.position.y);
                    this.rulerLine();
                }
            };

            var game = new Phaser.Game(430, 250, Phaser.AUTO, '');
            game.state.add('demo', DemoState);
            game.state.start('demo');
        </script>

 

It runs ok on desktops but on mobile phones after you hve drawn a few lines it hangs. (I have noticed that on desktops it casues the browser to use up large amounts of ram.

What am I doing wrong? How can I improve on this so that it will not hang up mobile browsers?

Thanks in advance for any help.

 

Jesús.