Consistent quoting for Module['canvas']. NFC (#22876)

127 or the 150 references to Module['canvas'] were already quoted. In
general this is how we handle properties of the Module object that we
don't want closure to minify. Once I do the same for the ctx object we
can remove the closure type annotation completely from shell.js.

src/library_browser.js

@@ -192,7 +192,7 @@ var LibraryBrowser = {
     },
 
     createContext(/** @type {HTMLCanvasElement} */ canvas, useWebGL, setInModule, webGLContextAttributes) {
-      if (useWebGL && Module.ctx && canvas == Module.canvas) return Module.ctx; // no need to recreate GL context if it's already been created for this canvas.
+      if (useWebGL && Module.ctx && canvas == Module['canvas']) return Module.ctx; // no need to recreate GL context if it's already been created for this canvas.
 
       var ctx;
       var contextHandle;

src/proxyClient.js

@@ -153,9 +153,9 @@ WebGLClient.prefetch();
 setTimeout(() => {
   worker.postMessage({
     target: 'worker-init',
-    width: Module.canvas.width,
-    height: Module.canvas.height,
-    boundingClientRect: cloneObject(Module.canvas.getBoundingClientRect()),
+    width: Module['canvas'].width,
+    height: Module['canvas'].height,
+    boundingClientRect: cloneObject(Module['canvas'].getBoundingClientRect()),
     URL: document.URL,
     currentScriptUrl: filename,
     preMain: true });
@@ -190,18 +190,18 @@ worker.onmessage = (event) => {
     case 'canvas': {
       switch (data.op) {
         case 'getContext': {
-          Module.ctx = Module.canvas.getContext(data.type, data.attributes);
+          Module.ctx = Module['canvas'].getContext(data.type, data.attributes);
           if (data.type !== '2d') {
             // possible GL_DEBUG entry point: Module.ctx = wrapDebugGL(Module.ctx);
             Module.glClient = new WebGLClient();
           }
           break;
         }
         case 'resize': {
-          Module.canvas.width = data.width;
-          Module.canvas.height = data.height;
+          Module['canvas'].width = data.width;
+          Module['canvas'].height = data.height;
           if (Module.ctx?.getImageData) Module.canvasData = Module.ctx.getImageData(0, 0, data.width, data.height);
-          worker.postMessage({ target: 'canvas', boundingClientRect: cloneObject(Module.canvas.getBoundingClientRect()) });
+          worker.postMessage({ target: 'canvas', boundingClientRect: cloneObject(Module['canvas'].getBoundingClientRect()) });
           break;
         }
         case 'render': {
@@ -216,7 +216,7 @@ worker.onmessage = (event) => {
           break;
         }
         case 'setObjectProperty': {
-          Module.canvas[data.object][data.property] = data.value;
+          Module['canvas'][data.object][data.property] = data.value;
           break;
         }
         default: throw 'eh?';
@@ -338,7 +338,7 @@ function shouldPreventDefault(event) {
 });
 
 ['mousedown', 'mouseup', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'mouseout'].forEach((event) => {
-  Module.canvas.addEventListener(event, (event) => {
+  Module['canvas'].addEventListener(event, (event) => {
     worker.postMessage({ target: 'canvas', event: cloneObject(event) });
     event.preventDefault();
   }, true);

src/proxyWorker.js

@@ -261,14 +261,14 @@ document.createElement = (what) => {
 
 document.getElementById = (id) => {
   if (id === 'canvas' || id === 'application-canvas') {
-    return Module.canvas;
+    return Module['canvas'];
   }
   throw 'document.getElementById failed on ' + id;
 };
 
 document.querySelector = (id) => {
   if (id === '#canvas' || id === '#application-canvas' || id === 'canvas' || id === 'application-canvas') {
-    return Module.canvas;
+    return Module['canvas'];
   }
   throw 'document.querySelector failed on ' + id;
 };
@@ -324,7 +324,7 @@ var screen = {
   height: 0
 };
 
-Module.canvas = document.createElement('canvas');
+Module['canvas'] = document.createElement('canvas');
 
 Module.setStatus = () => {};
 
@@ -412,9 +412,9 @@ function onMessageFromMainEmscriptenThread(message) {
     }
     case 'canvas': {
       if (message.data.event) {
-        Module.canvas.fireEvent(message.data.event);
+        Module['canvas'].fireEvent(message.data.event);
       } else if (message.data.boundingClientRect) {
-        Module.canvas.boundingClientRect = message.data.boundingClientRect;
+        Module['canvas'].boundingClientRect = message.data.boundingClientRect;
       } else throw 'ey?';
       break;
     }
@@ -451,10 +451,10 @@ function onMessageFromMainEmscriptenThread(message) {
       break;
     }
     case 'worker-init': {
-      Module.canvas = document.createElement('canvas');
-      screen.width = Module.canvas.width_ = message.data.width;
-      screen.height = Module.canvas.height_ = message.data.height;
-      Module.canvas.boundingClientRect = message.data.boundingClientRect;
+      Module['canvas'] = document.createElement('canvas');
+      screen.width = Module['canvas'].width_ = message.data.width;
+      screen.height = Module['canvas'].height_ = message.data.height;
+      Module['canvas'].boundingClientRect = message.data.boundingClientRect;
 #if ENVIRONMENT_MAY_BE_NODE
       if (ENVIRONMENT_IS_NODE)
 #endif

src/shell.js

@@ -25,7 +25,6 @@ var Module = moduleArg;
 #elif USE_CLOSURE_COMPILER
 // if (!Module)` is crucial for Closure Compiler here as it will otherwise replace every `Module` occurrence with a string
 var /** @type {{
-  canvas: HTMLCanvasElement,
   ctx: Object,
 }}
  */ Module;

test/reftest.js

@@ -26,8 +26,8 @@ function doReftest() {
   doReftest.done = true;
   var img = new Image();
   img.onload = () => {
-    assert(img.width == Module.canvas.width, `Invalid width: ${Module.canvas.width}, should be ${img.width}`);
-    assert(img.height == Module.canvas.height, `Invalid height: ${Module.canvas.height}, should be ${img.height}`);
+    assert(img.width == Module['canvas'].width, `Invalid width: ${Module['canvas'].width}, should be ${img.width}`);
+    assert(img.height == Module['canvas'].height, `Invalid height: ${Module['canvas'].height}, should be ${img.height}`);
 
     var canvas = document.createElement('canvas');
     canvas.width = img.width;
@@ -36,7 +36,7 @@ function doReftest() {
     ctx.drawImage(img, 0, 0);
     var expected = ctx.getImageData(0, 0, img.width, img.height).data;
 
-    var actualUrl = Module.canvas.toDataURL();
+    var actualUrl = Module['canvas'].toDataURL();
     var actualImage = new Image();
     actualImage.onload = () => {
       /*
@@ -69,7 +69,7 @@ function doReftest() {
       if (wrong || reftestRebaseline) {
         // Generate a png of the actual rendered image and send it back
         // to the server.
-        Module.canvas.toBlob((blob) => {
+        Module['canvas'].toBlob((blob) => {
           sendFileToServer('actual.png', blob);
           reportResultToServer(wrong);
         })