We cannot change canvas' id

[damien-monni]

I would like to use two canvas on my page so my idea is to instanciate the wasm twice. The problem is that the canvas's ID seems hardcoded in the SDL port, so the canvas size is not well handled: both instances are controling the same canvas even if I pass a different HTML canvas on the module initialization.

SDL2/src/video/emscripten/SDL_emscriptenvideo.c

Line 217 in 8424e3c

wdata->canvas_id = SDL_strdup("#canvas");

Would it be a way to make it dynamic?

[Daft-Freak]

Ah, #canvas used to mean "use Module.canvas" until the HTML5 API was changed to take selectors (DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR). I had some patches somewhere to allow passing selectors to SDL_CreateWindowFrom to allow using other canvases, but Emscripten's EGL implementation is still hardcoded to Module.canvas so only the software renderer works.

An easier solution for using one window/canvas with a non-default id might be to add a SDL_HINT_EMSCRIPTEN_DEFAULT_CANVAS_ID hint with a note that GL will be broken unless Module.canvas is set to the same canvas. (Until either EGL gets changed, or I port the SDL backend to use the webgl API directly...)

[VileLasagna]

I've recently started fiddling with emscripten myself and bumped into this issue for a different reason. In my case, I want to embed some emscripten code in my wordpress blog but the pages themselves actually use a canvas with the id "canvas" so it hasn't gone well.

Is there any fix/tweak for this in site?
If nothing's immediately on the horizon I wouldn't mind messing about with the port source on my end but must confess to not only be very new to the emscripten/web side of things but also never having had to dive too deep into the guts of SDL so not entirely sure if this line is all I'd need to change and exactly to what (I'm guessing the raw id of the alternative canvas I intend to use would suffice?)

[Daft-Freak]

Changing that one line should be enough for the SDL side. I haven't looked at it in a while though.

[VileLasagna]

Hey, just coming by to confirm that this worked for me. Did have to hard-code to the alternative ID I've settled for, though, as I couldn't figure out how to get the expected behaviour of it asking Module for the canvas (then again, this is very new to me and I didn't look super deep into it). So, for me the workaround is acceptable and I did manage to get a couple demos for my blog, integrated decently enough like this WebGL Mandelbox

Thanks a lot for the help

[edmund-huber]

I was having this same problem. I just compiled with -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=0 and then usage like the following justworked (pasted from my vim, so please ignore the weird sigils -- and note "canvas2" instead of "canvas"):

 43         <canvas id="canvas2" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>¶
 44         <script type="text/javascript">¶
 45             Module({¶
 46                 preRun: [],¶
 47                 postRun: [],¶
 48                 print: function(s) { console.log("wasm: " + s); },¶
 49                 printErr: function(s) { console.log("wasm: " + s); },¶
 50                 canvas: (function() {¶
 51                     var canvas = document.getElementById("canvas2");¶
 52                     // TODO, should make this more robust.¶
 53                     canvas.addEventListener("webglcontextlost", function(e) {¶
 54                         console.log("WebGL context lost");¶
 55                         e.preventDefault();¶
 56                     });¶
 57                     return canvas;¶
 58                 })(),¶
 59                 setStatus: function(text) {},¶
 60                 monitorRunDependencies: function(left) {},¶
 61                 arguments: ['input.png']¶
 62             });¶
 63         </script>¶