Canvas ScreenShot not working

Question

Some time ago, I was able to take screenshot from my webGL 3D model using the toDataURL function, but suddenly this stopped working, and now I am not able to get an image from any 3D model.

Please see bellow for more insights:

ThreeJS examples:

WebGL example:

http://madebyevan.com/webgl-water/

basic example:

In all previous examples I didn't get the image, I get either a black or transparent image

2D:

http://jsfiddle.net/m7sA9/show/

Only the 2D exemple gave back the correct image

In all previous examples I use this simple method to get the image.

document.getElementsByTagName('canvas')[0].toDataURL();

Any idea of what I am doing wrong?

I've tried this on a MacBook Pro: Chrome and FireFox, and on FireFox on Windows 8.1 and I got the same result

following is a animation on how I made the tests on Chrome

enter image description here

Can u post the relevatnt html + js? What do you get when you console `document.getElementsByTagName('canvas')[0]` — Roy M J, Jul 14 '14 at 12:03
Actually its more like a global problem here, all I am doing is visiting the url opening the console, typing that js line, and I get a base64 image link to open inside the browser — Abu Romaïssae, Jul 14 '14 at 12:15
See if the entire thing is base64 or whether the image type is appended in front of it. Further try cop-pasting the entire thing to something like http://www.askapache.com/online-tools/base64-image-converter/ and see if u get the image. — Roy M J, Jul 14 '14 at 12:28
I've added a small screenshot animation on how I test on chrome, please check it out — Abu Romaïssae, Jul 14 '14 at 12:33
@RoyMJ, thanks for your comment, but I don't think the problem is in the base64 image code, since the 2D drawing are working fine, or am I mistaken something? — Abu Romaïssae, Jul 14 '14 at 12:35

score 3 · Accepted Answer · answered Jul 15 '14 at 08:50

I've found a fix for this problem in my Threejs app, the solution was as simple as putting a flag to true, so in my threejs instanciation I added preserveDrawingBuffer:

var renderer   = new THREE.WebGLRenderer({
  preserveDrawingBuffer   : true   // required to support .toDataURL()
});

And this is it for the model that uses ThreeJs, so I think the problem is related to a configuration setting and there must be some option for using plain WebGl or other libraries.

Thank you for reading, and I hope this helps someone in future.