create_emscripten_context.cpp

#include <emscripten.h>
#include <iostream>
#include <string>
#include <GLES2/gl2.h>
#include <EGL/egl.h>
extern "C"
{
#include "emscripten/html5.h"
}

// WASM side
extern "C"
{
  EMSCRIPTEN_KEEPALIVE
  void createContext(int windowWidth, int windowHeight, char *id){
    EmscriptenWebGLContextAttributes attrs;
    attrs.explicitSwapControl = 0;
    attrs.depth = 1;
    attrs.stencil = 1;
    attrs.antialias = 1;
    attrs.majorVersion = 3;
    attrs.minorVersion = 0;

    std::string id_str = id;
    std::string sharp_id_str = "#" + id_str;

    EMSCRIPTEN_WEBGL_CONTEXT_HANDLE context = emscripten_webgl_create_context(sharp_id_str.c_str(), &attrs);
    emscripten_webgl_make_context_current(context);
  }
}

create_emscripten_context.js

// JS side
const createCanvas = (id, windowWidth, windowHeight) => {
  const canvas = document.createElement("canvas");
  canvas.id = id;
  canvas.width = windowWidth;
  canvas.height = windowHeight;
  canvasContainer.appendChild(canvas);
  const context = canvas.getContext("webgl2");

  const idBuffer = Module._malloc(id.length + 1);
  Module.stringToUTF8(id, idBuffer, id.length + 1);
  Module.ccall(
    "createContext",
    null,
    ["number", "number", "number"],
    [windowWidth, windowHeight, idBuffer]
  );
};

createCanvas("openGL", 8, 8);