Saving frames as img elements

index.html

@@ -22,13 +22,10 @@
 			canvas {
                             width: 512px;
                             height: 512px;
-                            image-rendering: crisp-edges; /* for firefox */ 
+                            image-rendering: crisp-edges; /* for firefox */;
                             image-rendering: pixelated;
                         }
                         div#giflink {
-                            position.fixed;
-                            top: 600px;
-                            left: 300px;
                         }
 			div#release_notes {
 				position: fixed;

main.js

@@ -47,7 +47,11 @@ camera.lookAt(0, 0, 0);
 
 const canvas = document.getElementById("canvas");
 
-const renderer = new THREE.WebGLRenderer({antialias: true, canvas: canvas});
+const renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    preserveDrawingBuffer: true,
+    canvas: canvas
+});
 renderer.setSize(40,40);
 
 canvas.style.width="400px";
@@ -55,7 +59,6 @@ canvas.style.height="400px";
 
 renderer.localClippingEnabled = true;
 
-const gl = renderer.getContext();
 
 // set up colours and materials for gui callbacks
 scene.background = new THREE.Color(DEFAULTS.background);
@@ -204,10 +207,11 @@ let dragx0 = 0;
 let dragy0 = 0;
 let dragging = false;
 let frame = 0;
-const FRAME_MAX = 8;
+const FRAME_MAX = 600;
 let completed = false;
 
 
+const giflink = document.getElementById("giflink");
 
 createShape(gui.params.shape, gui.params.option);
 
@@ -217,7 +221,7 @@ function animate() {
 	theta += dtheta;
 	psi += dpsi;
 
-const rotations = [
+        const rotations = [
 		rotfn[gui.params.xRotate](theta), 
 		rotfn[gui.params.yRotate](psi)
 	];
@@ -231,7 +235,14 @@ const rotations = [
 
 
 	renderer.render( scene, camera );
-
+	if( frame < FRAME_MAX ) {
+    	    console.log(`gif frame ${frame}`);
+            const data = canvas.toDataURL("image/png", 1);
+            const img = document.createElement("img");
+            img.setAttribute('src', data);
+            giflink.append(img);
+            frame++;
+        }
 }
 
 animate();