Take a screenshot of the canvas

[Zaidar]

Hi, 

 

do someone know how can I take a picture of the canvas ?

 

Usually with vanilla JS I would use canvas.toDataURL();

 

but here, when I try to access the canvas with game.canvas or game.stage.canvas, it just creates me a black image;

 

Ideas ?

 

Thanks.

[rich]

That is how you would do it - just make sure you do it at the right time or the canvas might have been cleared awaiting render.

[Zaidar]

Ok, I'll try to see that tomorrow, thx

[Ali BARIN]

I'm having same problem too. Does anyone have a suggestion?
 
It doesn't work.

window.open(game.canvas.toDataURL());

Result:

 

[Ali BARIN]

I found a solution for this problem. I'm using html2canvas.js for solution. 

 

Use it for taking a screenshot:

html2canvas(document.querySelector("canvas"), { onrendered: function(canvas){ window.open(canvas.toDataURL()); } });

[themitchnz]

I've never done this, but I have bookmarked a couple of libraries:

 

http://www.nihilogic.dk/labs/canvas2image/ - Still uses toDataUrl() but abstracts some of it away.

 

https://github.com/spite/ccapture.js - This allows you to record canvas animation as a video. (not in real time)

[Zaidar]

Hi guys, finally the use of game.canvas.toDataUrl() works for me.

I'm using OOP on my games now, which I didn't do before. I don't know if it's from this or because the new phaser version (I was on 1.1.3, now 2.0.4), but it works perfectly with toDataUrl.

Be careful though, I like to develop my game for web browser, but also for Cocoonjs, and I don't think they support the toDataUrl as it's not in their HTML5 list of supported canvas function.

[Ali BARIN]

Thank you all.

 

I learned now. We saw black picture. Because our games use WebGL as renderer. Canvas renderer is working perfectly.

 

Correct me if I'm wrong.

 

Edit: I wrote wrong. I updated

[Zaidar]

I currently use Phaser.Canvas with my game and the toDataUrl() works perfectly, so I don't think the rendering Context is the issue.

[Brian Jordan]

I learned now. We saw black picture. Because our games use WebGL as renderer. Canvas renderer is working perfectly.

 

Worth noting — now to support .png screenshots of WebGL rendered games, you can set a config parameter preserveDrawingBuffer that will let you call game.canvas.toDataURL() with WebGL or Canvas renderers with no issue.