Proper way to drawing with mouse

[CrabBoy]

Hi guys,

I´m working on simple Connect-the-dots game (there are dots on the screen and you have to join them with mouse in order to get some image) and I´m trying to implement pencil, which will draw on canvas. I also need functionality where all what I´ve previously drawn will change the color when the image is complete, that means I need to preserve created data somehow. I´ve already tried multiple solutions I found here and around the internet, but nothing seems to work as I need. I´ve tried this:

1) Drawing with bitmapdata

Basically this solution: http://phaser.io/examples/v2/bitmapdata/copy-bitmapdata, the problem is dots aren´t close enough each other when you move mouse fast and also I cannot access previously drawn data in order to change their color.

 

2) Drawing with Phaser.graphics

this.game.input.onDown.add(this.startDrawing, this);
this.game.input.onUp.add(this.stopDrawing, this);

startDrawing: function(pointer) {
    this.drawing = true;
        
    this.graphics = this.game.add.graphics();
    this.graphics.beginFill();
    this.graphics.lineStyle(4, 0xFFFFFF);
    this.graphics.moveTo(pointer.x, pointer.y);

    this.game.input.addMoveCallback(this.onDraw, this);
},

onDraw: function(pointer, x, y) {
    if (this.drawing)
        this.graphics.lineTo(x,y);
},

stopDrawing: function(pointer, x, y) {
    this.drawing = false;
    this.graphics.endFill();

    this.game.input.deleteMoveCallback(this.onDraw, this);
},

Here I`ve experienced some serious drawbacks. First, this solution doesn`t work at all in Opera (also I`ve noticed weird behaviour of this example in my browser - the shapes are just blinking or you cannot see them at all) and in other browsers it looks like shapes are closing themselves automatically - that means shape is after each step closed (it is always polygon) and I cannot make path just from the lines - is it correct behaviour of the graphics class?

2) Drawing directly to canvas context through bitmapdata

Currently I ended up with this: 

this.bmd = this.game.make.bitmapData(this.game.width, this.game.height);
this.bmd.addToWorld();

this.game.input.onDown.add(this.startDrawing, this);
this.game.input.onUp.add(this.stopDrawing, this);

startDrawing: function(pointer) {
    this.drawing = true;
        
    this.bmd.ctx.beginPath();
    this.bmd.ctx.lineWidth = 10;
    this.bmd.ctx.moveTo(pointer.x, pointer.y);

    this.game.input.addMoveCallback(this.onDraw, this);
},

onDraw: function(pointer, x, y) {
    if (this.drawing){
        this.bmd.ctx.lineTo(x, y);
        this.bmd.ctx.stroke();
    }
},

stopDrawing: function(pointer, x, y) {
    this.drawing = false;
    this.bmd.ctx.closePath();

    this.game.input.deleteMoveCallback(this.onDraw, this);
},

This solution seems to work only in IE, in Firefox and Opera nothing is shown. 

Could you please provide me some advices how to solve my situation? What is the best way to implement pencil-like behaviour in Phaser? I`ve already spent whole afternoon on this - without usable solution. Thanks in advance!

[kevdude]

Check out this example.

Not sure if that's the method you mentioned, but it looks like it might help.