Export Canvas as PNG does decrease the quality of the image

It seems like the renderer.extract.canvas function is decreasing the quality of the canvas. Is there a possability to change that behaviour by another function or some parameter?

The prepared example that demonstrates that issue is located under Example (Stackblitz). If you check that out you will find a canvas with some example object + a button that exports the canvas as a PNG via renderer.extract.canvas. You will notice that the quality of the exported PNG has some problems if you zoom to the circle:

The interesting thing here is that if I export the canvas via right click “Save image as” the quality is much better (there are less pixalated borders):

The problem is that this solution is not acceptable as in my application there is also such a button that will trigger the export. Also it seems like the problem is getting bigger with bigger canvas sizes. If I export the canvas as a PNG inside the application I am getting the following pixelated image:

In the actual canvas that looks like that:

Expected Behavior

Actually I would expect the exported PNG to look like the canvas, so it should not decrease the quality of the images.

Current Behavior

There are pixelated parts which are not pixelated on the canvas.

Steps to Reproduce

Open stackblitz, press on the button “Save PNG” to export the pixelated image. Then right click on the canvas, select “Save image as” and compare the 2 images.

Example (Stackblitz)

Environment

• pixi.js version: 6.5.6
• OS & Version: Windows 10
• Running Example: Example (Stackblitz)

[styriandev]

Thanks for pointing that workaround. Unfortunally this does not work as it is only exporting one specific part of the canvas (I guess the part that is visible). As we have a Zoom feature as well as a scroll to specific parts of the canvas this could lead to different screenshots for the same canvas which is not the solution that we need. However, if I scroll out and create a screenshot of the whole canvas the quality of the image is the following:

So as you see not really good. I have used the following command to get the blob (after the app.renderer was called): this.app.renderer.plugins.extract.canvas().toBlob(blob =>{…}, ‘image/png’, 0);

I have also tried to change the last parameter to 1 but this does not help.

[domis86]

Maybe solution like this? :

1. Zoom to desired level.
2. “Move” canvas to see top left corner of whole scene.
3. Extract canvas image and save it in some “buffer”.
4. “Move” canvas to the right.
5. Repeat points 3 and 4 until you reach right side of scene.
6. Move canvas to see next chunk (row) of scene on the left.
7. Repeat points 3,4,5,6 until you scan whole scene.
8. Somehow join extracted chunks into one image 😃

In other words: extract chunks of scene and glue those images together into one image.