Emscripten/HTML integration tips

I wonder when webassembly will define some general purpose interface to tie into the DOM.

I understand that's on the roadmap, but not high priority.

Edit: No help with a prediction on when, but a bit of the "how": https://github.com/WebAssembly/design/blob/master/GC.md

> First, let’s discard the HTML5 Fullscreen API, it sounds great at first since it provides a fullscreen canvas without any browser window chrome. In reality it is quite useless however, since fullscreen mode must be activated from an input handler, and even then a warning is printed which has a different look and feel on each browser. The kicker is though that the Fullscreen API isn’t supported on iOS Safari (last I checked).

In my own WebGL applications, I support the HTML Fullscreen API, with a shim on iOS that cheats the data that indicates the call succeeded. Since the majority of people are not-iOS (i.e. desktop-of-any-OS or Android), there's no reason for them to receive a shitty experience just because Apple can't be arsed to implement web standards.

> Emscripten’s soft fullscreen ... only has one downside: when activated, it hides all other HTML elements on the page, so it can’t be used together with an HTML UI which should hover on top of the WebGL canvas.

For this among a few reasons, I'm also trying to get rid of all of my HTML UI elements. I have a few buttons left for triggering fullscreen mode, but they will soon be gone. The initial setup is harder--it's so easy to just drop in a new HTML element--but maintaining a consistent look and feel across platforms is easier if you are using only one graphics toolkit. It also makes spinning up new projects a little easier, as again, only one UI toolkit with which to bother.

> emscripten_get_element_css_size()

The documentation on this function (https://kripken.github.io/emscripten-site/docs/api_reference...) doesn't specify what units it returns. Does it return system-pixel values, or CSS-pixel values? I'm assuming from the name it's CSS-pixels. You have to multiply them by devicePixelRatio (a property on the Window object, looks like there is a function: https://kripken.github.io/emscripten-site/docs/api_reference...) to get system-pixel values. It will vary between devices, but on many smartphones your canvas is going to be only 1/3rd the native resolution. It will also be off if the user has zoomed their UI with ctrl+mouse wheel, or if they are running a HighDPI display.

Addendum: I'm curious to know how this function works: https://kripken.github.io/emscripten-site/docs/api_reference.... Is it using the Pointer Lock API, or is it just setting the Canvas element's cursor CSS property to "none"? Pointer Lock isn't available on iOS, Android, or Internet Explorer, but 'cursor: none;' won't let you--for example--mouse around in a 360 circle in an FPS. Given the existence of this function (https://kripken.github.io/emscripten-site/docs/api_reference...), I would assume it means that emscripten_hide_mouse is just setting the cursor property.