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

[dsmilkov]

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 the canvas element until the user calls fromPixels(). This makes the webcam-transfer-learning example work.

Fixes tensorflow/tfjs#313

---

This change is 

[nsthorat]

Review status: 0 of 1 files reviewed at latest revision, all discussions resolved, some commit checks failed.

---

src/kernels/backend_webgl.ts, line 306 at r1 (raw file):

      throw new Error('WebGL is not supported on this device');
    }
    if (typeof document !== 'undefined') {

Why are you removing this? I think this is a mistake. We need to create the canvas here.

---

Comments from Reviewable

[nsthorat]

Review status: 0 of 1 files reviewed at latest revision, 1 unresolved discussion, some commit checks failed.

---

src/kernels/backend_webgl.ts, line 306 at r1 (raw file):

Previously, nsthorat (Nikhil Thorat) wrote…

Why are you removing this? I think this is a mistake. We need to create the canvas here.

I see what you're trying to do. fromPixels is not the only place where we will need to initialize the canvas. The WebGLRenderingContext creation will fail since this is created before the DOM is ready, same with the calls to "getCanvas" (which happens from the t-sne code).

Maybe we need to add our own DOMReady listener from the constructor to initialize the canvas, and throw everywhere we try to access an uninitialized gpgpu.

---

Comments from Reviewable

[nsthorat]

Giving you an LGTM because I won't be online for a while, but you should make sure this code actually works in a test example since I think not initialize the canvas in the constructor will break a lot of stuff.

---

Review status: 0 of 1 files reviewed at latest revision, 1 unresolved discussion, some commit checks failed.

---

Comments from Reviewable

[dsmilkov]

Review status: 0 of 1 files reviewed at latest revision, 1 unresolved discussion, some commit checks pending.

---

src/kernels/backend_webgl.ts, line 306 at r1 (raw file):

Previously, nsthorat (Nikhil Thorat) wrote…

I see what you're trying to do. fromPixels is not the only place where we will need to initialize the canvas. The WebGLRenderingContext creation will fail since this is created before the DOM is ready, same with the calls to "getCanvas" (which happens from the t-sne code).

Maybe we need to add our own DOMReady listener from the constructor to initialize the canvas, and throw everywhere we try to access an uninitialized gpgpu.

Nice catch! You are right, I didn't realize it's the same canvas that we pass to the gpgpu context.

I made a specific fromPixelsCanvas, used only for the fromPixels calls, since according to the actual spec, you shouldn't call both getcontext('2d') and getcontext('webgl') on the same canvas. According to the spec, a call to getcontext(a) followed by a call to getcontext(b) where a != b, should be undefined behavior.

This might be related to why I was getting last 30% failing tests when I was using a global webgl backend, instead of per-describe() backend - call to tf.fromPixels which gets a 2d context on the same canvas might mess up the webgl context.

---

Comments from Reviewable

[caisq]

Thanks, @dsmilkov !