Drawing on BitmapData

[Gugis]

I create BitmapData and start drawing lines on it's canvas context:

create: function(){
    this.currentCanvas = this.game.make.bitmapData(2000, 2000);
    this.game.add.sprite(0,0,this.currentCanvas);
},

startDraw: function(){
    this.isPainting = true;
    var ctx = this.currentCanvas.ctx;
    ctx.lineWidth = 10;
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.shadowBlur = 10;
    ctx.shadowColor = 'rgb(0, 0, 0)';
    ctx.moveTo(this.game.input.x, this.game.input.y);
},

update: function(){
    if(this.isPainting){
        var ctx = this.currentCanvas.ctx;
        ctx.lineTo(this.game.input.x, this.game.input.y);
        ctx.stroke();
    }
}

Unfortunately nothing happens. I need to force render BitmadData canvas. What I am missing? 

Thanks

 

EDIT:

Line appears unless it's drawn immediately after creating BitmapData object. Here's sandbox http://phaser.io/sandbox/edit/jyhLtyyJ

[megmut]

Hey, I got something working, it's not ideal.. but it may be enough to get you started in the right direction. http://phaser.io/sandbox/jigJTCHg

Hope this helps! I'd investigate further, but I'm pretty busy at the moment

Cheers, Nick

[Gugis]

Hi megmut, thank you for your answer, but to create BitmapData object for every stroke is bad idea. Chrome crashed right away :/

[megmut]

yeah, I noticed this. I tried using the beginPath canvas function before drawing the line, however there seems to be some issue with the ctx or the sprite now being globally scoped, which is why I threw the draw function into the update loop.. a bad idea I know but I'm tired and it's late.. you can see a working version of what you're trying to achieve here, I think.. minus the pointer doing it: http://jsfiddle.net/TeGGx/1/

I'll take another look now

[megmut]

Okay, I found what you want.. However it was written in Phaser 1.1.4. The Link is here: http://janpeter.net/perma/phaser/cursorLine.html

I tried to port it to the new 2.4.6 stable, or what ever version is in the sandboxes right now, the link is here: http://phaser.io/sandbox/IUfBehdu though it doesn't work.. don't think it's far off though!

After doing some digging around, I think the fact you are using core canvas methods inside a game engine that has it's own render is your problem. Re-drawing the line, or adding another point, then drawing it again isn't possible from the way you tried to do it. I'd be very interested to see if somebody else manages a way to achieve this, without using phaser.graphics, but I hope I've been some help!

Cheers, Nick

[ivanix]

@Gugis,

 I saw two issues with your sandbox code.  First, startDraw() is getting called every time the mouse button is down and moving, so the begin points keep getting reset to the end points during draw.

Second, and more importantly, the BitmapData api has changed over time and it now seems you have to set the  dirty property to true right after calling render().

Changes made to your sandbox code ( i haven't figured out how to fork it at the moment ):

Create section:

var currentCanvas, ctx, lastptr;
var isDrawing = false;
function create() {
    currentCanvas = game.make.bitmapData(2000, 2000);
    game.add.sprite(0,0,currentCanvas);
    game.input.addMoveCallback(startDraw, this);
    
    ctx = currentCanvas.ctx;
    ctx.lineWidth = 10;
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.shadowBlur = 10;
    ctx.strokeStyle = '#ff0000';
    ctx.shadowColor = 'rgb(255, 255, 255)';
 
    lastptr = false;
}

function startDraw(pointer, x, y){
    console.log('startDraw: ' +  pointer.isDown);
    if(pointer.isDown){
        isDrawing = true;
    } else {
        isDrawing = false;
        return;
    }
    if (!lastptr) {
        ctx.moveTo(x, y);
    }

}

Update section:

function update() {
    if(isDrawing){
        ctx.lineTo(game.input.x, game.input.y);
        ctx.stroke();
        currentCanvas.dirty = true;
        currentCanvas.render();

        lastptr = true;
    } else {
        lastptr = false;
    }
}

 

Correction:

Looking at the phaser code,  i think dirty should be set true before calling render(). The dirty flag requirement may be specific to WebGL mode. Another side note, if the bitmap is being used by a sprite, the render() will be called on its own, so it is not needed in the example above.

 

Edited April 2, 2016 by ivanix
code and comment correction

[Gugis]

Yes! That's it! Thank tou ivanix  

I want to bother you guys more. I'm making map editor and this drawing function was meant for creating alpha mask texture. Inside update method I set drawn texture as alpha mask for texture that needs to be painted on terrain. I need to optimise alphaMask method because editor freezes after drawing longer stroke. There must be workaround.

Here's my project: https://rpg-gugis.c9users.io/ 

and there's files where you will find drawing functions: 

https://rpg-gugis.c9users.io/src/States/Editor.js 

https://rpg-gugis.c9users.io/src/Entities/Map.js

 

Thank you again guys!