Pixi.js: Canvas extract blank during pointerdown event

[jordanhe2]

I'm trying to extract a canvas from a sprite when it has been clicked or tapped. For some reason when I use the renderer's extract all I get is an empty canvas with the proper width and height.

Here's the essence of my code, I can provide the actual code if neccessary.

sprite.on("pointerdown", function (e) {
    // results in the blank canvas with the dimensions of the sprite
    var canvas = app.renderer.extract.canvas(sprite);

    window.open(canvas.toDataUrl());
});

I from my tests, the extract will work on any other DisplayObject within the pointerdown event except for the DisplayObject that is the target of the event. The extract will also work on the sprite in question when I use it outside of the pointerdown event. I'm using v4.5.3 by the way.

[ivanpopelyshev]

Are you trying to make pixel-perfect interaction?

Workaround: setTimeout(0, function() { ... })

[jordanhe2]

I've found why I'm getting this behavior. So when I have code like this:

var app = new PIXI.Application({
    antialias: true,
    backgroundColor: 0xFFFFFF
});

var loader = PIXI.loader;

var stage = app.stage;
var extract = app.renderer.extract;

var url = "http://www.goodboydigital.com/wp-content/uploads/2014/04/pixijs.png";

loader
    .add(url)
    .load(function () {
        var sprite = new PIXI.Sprite(
            PIXI.loader.resources[url].texture
        );


        sprite.interactive = true;
        sprite.on("pointerdown", function () {
            window.open(extract.canvas(sprite).toDataURL());
        });

        stage.addChild(sprite);
    });

document.body.appendChild(app.view);

Everything is fine and the canvas shows the sprite properly like this:

But if the sprite had its position offset like in the following code:

sprite.x = sprite.width / 2;
sprite.y = sprite.height / 2;

You get something like this:

So the canvas offsets the texture from the sprite by the same amount as it's offset by the stage. This seems to only be occurring during the pointerdown event and for when the target is the DisplayObject you are trying to extract. Is this expected behavior?

[jordanhe2]

Right now I can work around it by doing the following:

sprite.interactive = true;
sprite.on("pointerdown", function (e) {
    var x = sprite.x;
    var y = sprite.y;

    // Re-render sprite at 0,0 to prevent shifting on canvas
    sprite.x = 0;
    sprite.y = 0;
    app.renderer.render(sprite);

    window.open(extract.canvas(sprite).toDataURL());

    // Place sprite back to normal position and let autoRender re-render it
    sprite.x = x;
    sprite.y = y;
});

[modjke]

@jordanhe2 Besides resetting sprite's position you should also reset pivot, anchor, rotation and scale

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.