Forums » Help » Export Section of Canvas To Image

Is there a way you can save a section of the canvas to an image?

I know how to export the whole canvas to an image, but I only want a certain section of the game, basically making a screen shot without the gui.

The only way I could think of is to export the png, then place it in another canvas offset to exclude the gui. Seems like a lot of overhead, and there should be someway to export a square by coordinates.

To take a screenshot without the GUI:
1) Disable drawing of the GUI temporarily.
2) Call ig.game.draw();
3) Capture the canvas as an image.
4) Then re-able GUI drawing.

Something weird is happening, I'm able to get the image out of the game canvas and place it in another canvas or image on the page, but it is extremely zoomed in.

My game has no zoom at all, and both canvas have the same width/heights.

It looks like it is zoomed if by 4.

--- Updated ---

So when exporting to an image, everything is working fine and the image looks exactly as the game canvas, but if I export to the canvas it is zoomed weird.

If I go from the image to the new canvas, I get the same result.

I went through the CSS and I set the CSS to the new canvas it is wrong as well, but if I write the CSS inline as attributes of the 2nd canvas, then everything is correct.

It looks like there is something going on while the game loads, that is effecting all canvas elements on the page. I'm not going to go further into debugging this, but wanted to comment incase anyone runs into this problem down the line.