toDataURL() of webgl canvas returning transparent image [duplicate]

Question

I can't get toDataUrl() to work. Here's my code where I'm trying to get an image of the canvas and use it as the source of an existing image element.

var canvas = document.getElementById('glcanvas');
canvas.setAttribute('crossOrigin','anonymous');
var img = document.getElementById('imageToShowCanvas');
img.src = canvas.toDataURL();

What imageToShowCanvas is showing is a broken url. When I console.log the result of my call to toDataUrl() I get a link showing a transparent image with the height and width of the canvas.

I've heard of cors problems causing issues like this but I'm using chrome with –allow-file-access-from-files flag and there aren't any security errors in the console. Is there an easier way to get a screenshot of my webGl canvas?

Answer 1

Thank you LJ, I just needed to enable the preserveDrawingBuffer flag when getting the webGl context. Screenshots are now working perfectly!