From 619e99b159446a8601fc27512f938b3eeee113fe Mon Sep 17 00:00:00 2001
From: adroitwhiz <adroitwhiz@protonmail.com>
Date: Tue, 10 Nov 2020 23:32:59 -0500
Subject: [PATCH] Undo ImageData texture uploads

---
 src/BitmapSkin.js     | 13 +------------
 src/SVGSkin.js        | 10 ++--------
 src/Silhouette.js     |  9 +++++++--
 src/TextBubbleSkin.js |  5 +----
 4 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/src/BitmapSkin.js b/src/BitmapSkin.js
index 182d2061d..a993624c9 100644
--- a/src/BitmapSkin.js
+++ b/src/BitmapSkin.js
@@ -71,17 +71,6 @@ class BitmapSkin extends Skin {
         }
         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 === null) {
             const textureOptions = {
                 auto: false,
@@ -91,7 +80,7 @@ class BitmapSkin extends Skin {
             this._texture = twgl.createTexture(gl, textureOptions);
         }
 
-        this._setTexture(textureData);
+        this._setTexture(bitmapData);
 
         // Do these last in case any of the above throws an exception
         this._costumeResolution = costumeResolution || 2;
diff --git a/src/SVGSkin.js b/src/SVGSkin.js
index 0b58fdcd3..c01b7812c 100644
--- a/src/SVGSkin.js
+++ b/src/SVGSkin.js
@@ -66,21 +66,15 @@ class SVGSkin extends Skin {
     createMIP (scale) {
         this._svgRenderer.draw(scale);
 
-        // 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;
         // If one of the canvas dimensions is 0, set this MIP to an empty image texture.
         // This avoids an IndexSizeError from attempting to getImageData when one of the dimensions is 0.
         if (canvas.width === 0 || canvas.height === 0) return super.getTexture();
 
-        const context = canvas.getContext('2d');
-        const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
-
         const textureOptions = {
             auto: false,
             wrap: this._renderer.gl.CLAMP_TO_EDGE,
-            src: textureData,
+            src: canvas,
             premultiplyAlpha: true
         };
 
@@ -88,7 +82,7 @@ class SVGSkin extends Skin {
 
         // Check if this is the largest MIP created so far. Currently, silhouettes only get scaled up.
         if (this._largestMIPScale < scale) {
-            this._silhouette.update(textureData);
+            this._silhouette.update(canvas);
             this._largestMIPScale = scale;
         }
 
diff --git a/src/Silhouette.js b/src/Silhouette.js
index b96348a81..27747c8a1 100644
--- a/src/Silhouette.js
+++ b/src/Silhouette.js
@@ -134,9 +134,14 @@ class Silhouette {
             imageData = bitmapData;
             this._width = bitmapData.width;
             this._height = bitmapData.height;
+        } else if (bitmapData instanceof HTMLCanvasElement) {
+            // If passed a <canvas>, grab its image data.
+            const ctx = bitmapData.getContext('2d');
+            imageData = ctx.getImageData(0, 0, bitmapData.width, bitmapData.height);
+            this._width = bitmapData.width;
+            this._height = bitmapData.height;
         } else {
-            // Draw about anything else to our update canvas and poll image data
-            // from that.
+            // Draw about anything else to our update canvas and poll image data from that.
             const canvas = Silhouette._updateCanvas();
             const width = this._width = canvas.width = bitmapData.width;
             const height = this._height = canvas.height = bitmapData.height;
diff --git a/src/TextBubbleSkin.js b/src/TextBubbleSkin.js
index 0ce6ac1a2..c498157e0 100644
--- a/src/TextBubbleSkin.js
+++ b/src/TextBubbleSkin.js
@@ -260,9 +260,6 @@ class TextBubbleSkin extends Skin {
             this._renderTextBubble(requestedScale);
             this._textureDirty = false;
 
-            const context = this._canvas.getContext('2d');
-            const textureData = context.getImageData(0, 0, this._canvas.width, this._canvas.height);
-
             const gl = this._renderer.gl;
 
             if (this._texture === null) {
@@ -274,7 +271,7 @@ class TextBubbleSkin extends Skin {
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
 
-            this._setTexture(textureData);
+            this._setTexture(this._canvas);
         }
 
         return this._texture;