webassembly: canvas resize and high-DPI support

Canvas Sizing

The HTML canvas has two sizes: the CSS size and the canvas render size. The CSS size is determined according to standard CSS rules, while the render size is set using the "width" and "height" attributes. The render size must be set manually and is not auto-updated on CSS size change. Setting the render size to a value larger than the CSS size enables high-dpi rendering. 

As a special case, the canvas render size will be used as the CSS size if no CSS size is set. This means we require a CSS size for the canvas used by Qt.

For WebGL canvases the final buffer size may be different from the requested render size due to GPU limitations. emscripten_webgl_get_drawing_buffer_size() can be used to get the actual size.

Resize events

HTML does not provide general resize events for canvas elements. Several partial solutions are possible:

• Poll for size changes using requestAnimationFrame. This has the obvious drawback that we will wake the application at 60hz at all times.
• Window resize events are supported. Poll for canvas size changes on window resize. This works if the canvas size depends on the window/viewport size (for example for the full-viewport case). emscripten_set_resize_callback() can be used to get (HTML) Window resize events.
• The Web Component folks may have a solution: PolymerElements/iron-resizable-behavior
• Provide Javascript API which application code can call when it resizes the canvas.
• DOM MutationObserver can be used bt won’t work in all cases, for example if the canvas size is set to “100%”
• ResizeObserver is the API we are looking for; currently supported on Chrome (64+) only.

"Handle resize events": https://codereview.qt-project.org/#/c/215868/

Page Zoom

Chrome and Firefox factors the page zoom into window.devicePixelRatio, such that Qt's high-dpi support also handles page zoom. Safari does not. Edge is unknown.

We can either leave this as a browser decision, or work around the differences in the html5 platform plugin. Historically there has not been an API to access the page zoom value. VisualViewport.scale has now been implemented by some browsers.

Emscripten prototype: 

https://github.com/msorvig/qt-webassembly-examples/tree/master/emscripten_multiscreen

Implementation

https://codereview.qt-project.org/#/c/216005/