update Skin textures with ImageData

When possible pass ImageData to texture creation and updating to help
remove chance of references that keep canvas and underlying data from
being garbage collected.

Author: mzgoddard

src/BitmapSkin.js

@@ -70,20 +70,34 @@ class BitmapSkin extends Skin {
     setBitmap (bitmapData, costumeResolution, rotationCenter) {
         const gl = this._renderer.gl;
 
+        // Preferably bitmapData is ImageData. ImageData speeds up updating
+        // Silhouette and is better handled by more browsers in regards to
+        // memory.
+        let textureData = bitmapData;
+        if (bitmapData instanceof HTMLCanvasElement) {
+            // Given a HTMLCanvasElement get the image data to pass to webgl and
+            // Silhouette.
+            const context = bitmapData.getContext('2d');
+            textureData = context.getImageData(0, 0, bitmapData.width, bitmapData.height);
+        }
+
         if (this._texture) {
             gl.bindTexture(gl.TEXTURE_2D, this._texture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmapData);
-            this._silhouette.update(bitmapData);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
+            this._silhouette.update(textureData);
         } else {
             // TODO: mipmaps?
             const textureOptions = {
                 auto: true,
                 wrap: gl.CLAMP_TO_EDGE,
-                src: bitmapData
+                src: textureData
             };
 
             this._texture = twgl.createTexture(gl, textureOptions);
-            this._silhouette.update(bitmapData);
+            this._silhouette.update(textureData);
+
+            // Unset src to make garbage collecting textureData easier.
+            textureOptions.src = null;
         }
 
         // Do these last in case any of the above throws an exception

src/SVGSkin.js

@@ -77,10 +77,14 @@ class SVGSkin extends Skin {
             this._textureScale = newScale;
             this._svgRenderer._draw(this._textureScale, () => {
                 if (this._textureScale === newScale) {
+                    const canvas = this._svgRenderer.canvas;
+                    const context = canvas.getContext('2d');
+                    const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+
                     const gl = this._renderer.gl;
                     gl.bindTexture(gl.TEXTURE_2D, this._texture);
-                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._svgRenderer.canvas);
-                    this._silhouette.update(this._svgRenderer.canvas);
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
+                    this._silhouette.update(textureData);
                 }
             });
         }
@@ -99,20 +103,31 @@ class SVGSkin extends Skin {
         this._svgRenderer.fromString(svgData, 1, () => {
             const gl = this._renderer.gl;
             this._textureScale = this._maxTextureScale = 1;
+
+            // Pull out the ImageData from the canvas. ImageData speeds up
+            // updating Silhouette and is better handled by more browsers in
+            // regards to memory.
+            const canvas = this._svgRenderer.canvas;
+            const context = canvas.getContext('2d');
+            const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+
             if (this._texture) {
                 gl.bindTexture(gl.TEXTURE_2D, this._texture);
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._svgRenderer.canvas);
-                this._silhouette.update(this._svgRenderer.canvas);
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
+                this._silhouette.update(textureData);
             } else {
                 // TODO: mipmaps?
                 const textureOptions = {
                     auto: true,
                     wrap: gl.CLAMP_TO_EDGE,
-                    src: this._svgRenderer.canvas
+                    src: textureData
                 };
 
                 this._texture = twgl.createTexture(gl, textureOptions);
-                this._silhouette.update(this._svgRenderer.canvas);
+                this._silhouette.update(textureData);
+
+                // Unset src to make garbage collecting textureData easier.
+                textureData.src = null;
             }
 
             const maxDimension = Math.max(this._svgRenderer.canvas.width, this._svgRenderer.canvas.height);