Grabbing image from canvas

Hey Guys,

I have a scientific application in which I display to the user data that they may want to save and view at a later date. Everything they would need is drawn onto the gl canvas via texture overlays with varying transparencies. I was wondering if there was a good way to grab the image and save it somehow? I know that readPixels will return a pixel array from the canvas, but I cannot seem to get it to work:

		var buff = gl.readPixels(0, 0, 100, 100, gl.RGBA, gl.UNSIGNED_BYTE );

Any help would be greatly appreciated :).


var pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

you can also use

var data = canvas.toDataURL();