Module is not defined

[inhahe]

I'm importing the Emscripten js, but when I try Module.onRuntimeInitialized = () => { /*code here*/ }; I get "Module not defined"
That code does occur after the import of the js file.

Here's all my JavaScript:

    <script async type="text/javascript" src="em.js"></script>

    <script>
      /*ctx = document.getElementById('canvas').getContext('2d');      console.log(document.getElementById('canvas'));
      console.log(ctx);
      imagedata = ctx.createImageData(1000, 1000);
      */
      
      function mainLoop()
      {
        Module.ccall("_mainloop", null, [], []).then(() =>
        {
          var pixels = HEAPU8.subarray(pixelsptr, pixelsptr + w * h * 4);
          //pixels = new Uint8Array(Module.HEAPU8.buffer, pixelsptr, pixelsptr + w * h * 4);
          imagedata = [...pixels];
          //imagedata = pixels.concat(); //which is more efficient?
          //ctx.putImageData(imagadata, 0, 0);
          ctx.putImageData(pixels, 0, 0);
        })
        requestAnimationFrame(mainLoop);
      }
    </script>

    <script>
      Module.onRuntimeInitialized = () => {
        const pixelsptr = Module.ccall(c_getpixels, 'i32', [], []);
      };

    </script>

    <!-- For itch.io -->
    <script type='text/javascript'>
      window.onload = function () { window.focus(); }
      window.onclick = function () { window.focus(); }
    </script>

    <script>
      function changerotatehue()
      {
        if (document.getElementById("rotatehue").checked)
        {
          element = document.getElementById("txtfgcolor");
          element.style.color = "#888888";
          element.style.border = "1px solid #888888";
          document.getElementById("lblfgcolor").style.color = "#888888";

          element = document.getElementById("txthuespeed");
          element.style.color = "#000000";
          element.style.border = "1px solid #000000";
          document.getElementById("lblhuespeed").style.color = "#000000";
          element = document.getElementById("txthuesat");
          element.style.color = "#000000";
          element.style.border = "1px solid #000000";
          document.getElementById("lblhuesat").style.color = "#000000";
          element = document.getElementById("txthueval");
          element.style.color = "#000000";
          element.style.border = "1px solid #000000";
          document.getElementById("lblhueval").style.color = "#000000";
        }
        else
        {
          element = document.getElementById("txtfgcolor");
          element.style.color = "#000000";
          element.style.border = "1px solid #000000";
          document.getElementById("lblfgcolor").style.color = "#000000";

          element = document.getElementById("txthuespeed");
          element.style.color = "#888888";
          element.style.border = "1px solid #888888";
          document.getElementById("lblhuespeed").style.color = "#888888";
          element = document.getElementById("txthuesat");
          element.style.color = "#888888";
          element.style.border = "1px solid #888888";
          document.getElementById("lblhuesat").style.color = "#888888";
          element = document.getElementById("txthueval");
          element.style.color = "#888888";
          element.style.border = "1px solid #888888";
          document.getElementById("lblhueval").style.color = "#888888";
        }
      }
    </script>
    <script>
      function change()
      {
        matchobj = document.getElementById("bgcolor").value.match("[#]?(\\w{2})(\\w{2})(\\w{2})");
        if (matchobj.length != 4)
        {
          document.getElementById("bgcolor").style.color = "FF0000";
        }
        else
        {
          document.getElementById("bgcolor").style.color = "000000";
        }
        console.log(matchobj[0]);
        console.log(matchobj[1]);
        console.log(matchobj[2]);
        console.log(matchobj[3]);


        //var result = module.ccall('update',
        //  'boolean',
        //  ['number', 'number', 'number', 'number', 'number', 'number', 'number', 'boolean', 'number', 'number', 'number', 'boolean', 'number', 'number'],
        //  [
        //);
      }
    </script>

Oh, and here's my command line for compiling:
em++ /mnt/d/visual\ studio\ projects/scribbles3/em.cpp -s WASM=1 -s -o em.js -sALLOW_MEMORY_GROWTH -Oz

Thanks for any help.

[inhahe]

Nevermind, I guess I just had to add

    <script type='text/javascript'>
        var Module = {
            canvas: (function() { return document.getElementById('canvas'); })()
        };
    </script>

I had taken it out because I'm not actually accessing the canvas from within the C++.

[sbc100]

You should make sure you add onRuntimeInitialized to Module before you import your em.js file. When you do this you also need to define var Module. Same with canvas. Make sure you set those things before loading em.js file.