Unexpected resolution when saving pngs from canvas

[Ella Hoeppner]

I'm trying to save frames from an animation I've created with pixi, and I'm running into an issue. I'm trying to save the frames with the following code:

app.renderer.extract.canvas(graphics).toDataURL("image/png")
var a = document.createElement('a');
document.body.append(a);
a.download = name;
a.href = data;
a.click();
a.remove();

"graphics" is a Graphics object that I'm using to define my animation.

I initialized my app to be 1000x1000, so I was expecting the images I saved this way to also be 1000x1000. However, when I save them, their resolution isn't always 1000x1000. Usually the dimensions are somewhere between 1000 and 1004, and the two dimensions sometimes have different values. The dimensions don't even remain consistent over time as the animation progresses, sometimes they'll change from one frame to the next.

What is causing this issue, and how can I fix it? Thanks!

[ivan.popelyshev]

nope, its the size of Graphics. You have to look in the sources how "extract" works. it takes "graphics.getBounds()", then creates renderTexture of that size. It calls "renderer.render()" with offset of those bounds. If you want particular size - you have to create renderTexture and call "renderer.render()" on your own. Dont forget to destroy it afterwards.

Yes, many people already stated that default behaviour is strange for them. However, if we change it, there will be many people asking why it didnt take bounds of graphics

This is also one of places where users are supposed to actually look in the code, because implementation is stupid, there were many problems found in it, and we cannot guarantee that it works for all cases because of those precedents.

More info on "extract" problems: https://github.com/pixijs/pixi.js/issues?q=is%3Aissue+extract

Edited October 5, 2020 by ivan.popelyshev