implement hidpi for stdweb (web-sys wip?)

Cargo.toml

@@ -93,6 +93,7 @@ version = "0.3.22"
 optional = true
 features = [
     'console',
+    'CssStyleDeclaration',
     'BeforeUnloadEvent',
     'Document',
     'DomRect',

src/platform_impl/web/stdweb/canvas.rs

@@ -88,17 +88,25 @@ impl Canvas {
         (bounds.get_x(), bounds.get_y())
     }
 
-    pub fn width(&self) -> f64 {
-        self.raw.width() as f64
-    }
-
-    pub fn height(&self) -> f64 {
-        self.raw.height() as f64
+    pub fn size(&self) -> LogicalSize {
+        LogicalSize {
+            width: self.raw.width() as f64,
+            height: self.raw.height() as f64,
+        }
     }
 
     pub fn set_size(&self, size: LogicalSize) {
-        self.raw.set_width(size.width as u32);
-        self.raw.set_height(size.height as u32);
+        use stdweb::*;
+
+        let physical_size = size.to_physical(super::hidpi_factor());
+
+        self.raw.set_width(physical_size.width as u32);
+        self.raw.set_height(physical_size.height as u32);
+
+        js! {
+            @{self.raw.as_ref()}.style.width = @{size.width} + "px";
+            @{self.raw.as_ref()}.style.height = @{size.height} + "px";
+        }
     }
 
     pub fn raw(&self) -> &CanvasElement {

src/platform_impl/web/stdweb/mod.rs

@@ -41,6 +41,14 @@ pub fn window_size() -> LogicalSize {
     LogicalSize { width, height }
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
+// TODO: Use media queries to register changes in dpi: https://jsfiddle.net/b6zcg24u/
+// TODO: Where does winit handle DPI changes? we can resize the "backbuffer" (canvas element), but isn't that usually handled by e.g. gfx?
+pub fn hidpi_factor() -> f64 {
+    let window = window();
+    window.device_pixel_ratio()
+}
+
 pub fn is_fullscreen(canvas: &CanvasElement) -> bool {
     match document().fullscreen_element() {
         Some(elem) => {

src/platform_impl/web/web_sys/canvas.rs

@@ -86,17 +86,22 @@ impl Canvas {
         (bounds.x(), bounds.y())
     }
 
-    pub fn width(&self) -> f64 {
-        self.raw.width() as f64
-    }
-
-    pub fn height(&self) -> f64 {
-        self.raw.height() as f64
+    pub fn size(&self) -> LogicalSize {
+        LogicalSize {
+            width: self.raw.width() as f64,
+            height: self.raw.height() as f64,
+        }
     }
 
     pub fn set_size(&self, size: LogicalSize) {
-        self.raw.set_width(size.width as u32);
-        self.raw.set_height(size.height as u32);
+        let physical_size = size.to_physical(super::hidpi_factor());
+
+        self.raw.set_width(physical_size.width as u32);
+        self.raw.set_height(physical_size.height as u32);
+
+        let style = self.raw.style();
+        let _todo = style.set_property("width", &format!("{}px", size.width));
+        let _todo = style.set_property("height", &format!("{}px", size.height));
     }
 
     pub fn raw(&self) -> &HtmlCanvasElement {

src/platform_impl/web/web_sys/mod.rs

@@ -9,7 +9,7 @@ use crate::dpi::LogicalSize;
 use crate::platform::web::WindowExtWebSys;
 use crate::window::Window;
 use wasm_bindgen::{closure::Closure, JsCast};
-use web_sys::{window, BeforeUnloadEvent, Element, HtmlCanvasElement};
+use web_sys::{window, BeforeUnloadEvent, HtmlCanvasElement};
 
 pub fn throw(msg: &str) {
     wasm_bindgen::throw_str(msg);
@@ -56,15 +56,19 @@ pub fn window_size() -> LogicalSize {
     LogicalSize { width, height }
 }
 
+pub fn hidpi_factor() -> f64 {
+    let window = web_sys::window().expect("Failed to obtain window");
+    window.device_pixel_ratio()
+}
+
 pub fn is_fullscreen(canvas: &HtmlCanvasElement) -> bool {
     let window = window().expect("Failed to obtain window");
     let document = window.document().expect("Failed to obtain document");
 
-    match document.fullscreen_element() {
-        Some(elem) => {
-            let raw: Element = canvas.clone().into();
-            raw == elem
-        }
-        None => false,
-    }
+    canvas.is_same_node(
+        document
+            .fullscreen_element()
+            .as_ref()
+            .map(std::ops::Deref::deref),
+    )
 }

src/platform_impl/web/window.rs

@@ -92,18 +92,12 @@ impl Window {
 
     #[inline]
     pub fn inner_size(&self) -> LogicalSize {
-        LogicalSize {
-            width: self.canvas.width() as f64,
-            height: self.canvas.height() as f64,
-        }
+        self.canvas.size()
     }
 
     #[inline]
     pub fn outer_size(&self) -> LogicalSize {
-        LogicalSize {
-            width: self.canvas.width() as f64,
-            height: self.canvas.height() as f64,
-        }
+        self.canvas.size()
     }
 
     #[inline]
@@ -128,7 +122,7 @@ impl Window {
 
     #[inline]
     pub fn hidpi_factor(&self) -> f64 {
-        1.0
+        super::backend::hidpi_factor()
     }
 
     #[inline]