ToDataURL () webgl canvas returning a transparent image

Question

I cannot get toDataUrl () to work. Here is my code where I am trying to get a canvas image and use it as a source of an existing image element.

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

Which image displayed on the image is a broken URL. When I console.log the result of my call toDataUrl (), I get a link showing a transparent image with the height and width of the canvas.

I heard about problems with Cors causing such problems, but I use chrome with the -allow-file-access-from-files flag and there are no security errors in the console. Is there an easier way to get a screenshot of my webGl canvas?

Answer 1

Thanks, LJ, I just needed to enable the preserveDrawingBuffer flag when getting the webGl context. Screenshots now work great!