Make sure tf.fromPixels() gets called after the DOM is ready (#1064)

BUG Since a newer version of Chrome, you have to create the canvas element when the DOM is ready in order to get a 2d rendering context. This PR postpones the creation of a fromPixelsCanvas element until the user calls fromPixels(). This makes the webcam-transfer-learning example work.

Fixes tensorflow/tfjs#313

Author: dsmilkov

src/kernels/backend_webgl.ts

@@ -88,6 +88,7 @@ export interface WebGLTimingInfo extends TimingInfo {
 export class MathBackendWebGL implements KernelBackend {
   private texData = new WeakMap<DataId, TextureData>();
   private canvas: HTMLCanvasElement;
+  private fromPixelsCanvas: HTMLCanvasElement;
 
   private programTimersStack: TimerNode[];
   private activeTimers: TimerNode[];
@@ -119,16 +120,24 @@ export class MathBackendWebGL implements KernelBackend {
     const outShape = [pixels.height, pixels.width, numChannels];
 
     if (pixels instanceof HTMLVideoElement) {
-      if (this.canvas == null) {
-        throw new Error(
-            'Can\'t read pixels from HTMLImageElement outside ' +
-            'the browser.');
+      if (this.fromPixelsCanvas == null) {
+        if (typeof document === 'undefined') {
+          throw new Error(
+              'Can\'t read pixels from HTMLImageElement outside the browser.');
+        }
+        if (document.readyState !== 'complete') {
+          throw new Error(
+              'The DOM is not ready yet. Please call tf.fromPixels() ' +
+              'once the DOM is ready. One way to do that is to add an event ' +
+              'listener for `DOMContentLoaded` on the document object');
+        }
+        this.fromPixelsCanvas = document.createElement('canvas');
       }
-      this.canvas.width = pixels.width;
-      this.canvas.height = pixels.height;
-      this.canvas.getContext('2d').drawImage(
+      this.fromPixelsCanvas.width = pixels.width;
+      this.fromPixelsCanvas.height = pixels.height;
+      this.fromPixelsCanvas.getContext('2d').drawImage(
           pixels, 0, 0, pixels.width, pixels.height);
-      pixels = this.canvas;
+      pixels = this.fromPixelsCanvas;
     }
     const tempPixelArray = Tensor.make(texShape, {}, 'int32');
 
@@ -1017,6 +1026,9 @@ export class MathBackendWebGL implements KernelBackend {
     }
     this.textureManager.dispose();
     this.canvas.remove();
+    if (this.fromPixelsCanvas != null) {
+      this.fromPixelsCanvas.remove();
+    }
     if (this.gpgpuCreatedLocally) {
       this.gpgpu.dispose();
     }