Implement hidpi for web platform (#1233)

* fix: use a 'static lifetime for the web backend's `Event` types

* implement hidpi for stdweb (web-sys wip?)

* fix: make all canvas resizes go through backend::set_canvas_size

* update Window docs for web, make `inner/outer_position` return the position in the viewport

src/platform_impl/web/stdweb/canvas.rs

@@ -1,5 +1,5 @@
 use super::event;
-use crate::dpi::{LogicalPosition, LogicalSize};
+use crate::dpi::{LogicalPosition, PhysicalPosition, PhysicalSize};
 use crate::error::OsError as RootOE;
 use crate::event::{ModifiersState, MouseButton, MouseScrollDelta, ScanCode, VirtualKeyCode};
 use crate::platform_impl::OsError;
@@ -19,6 +19,7 @@ use stdweb::web::{
 };
 
 pub struct Canvas {
+    /// Note: resizing the CanvasElement should go through `backend::set_canvas_size` to ensure the DPI factor is maintained.
     raw: CanvasElement,
     on_focus: Option<EventListenerHandle>,
     on_blur: Option<EventListenerHandle>,
@@ -82,23 +83,20 @@ impl Canvas {
             .expect(&format!("Set attribute: {}", attribute));
     }
 
-    pub fn position(&self) -> (f64, f64) {
+    pub fn position(&self) -> LogicalPosition<f64> {
         let bounds = self.raw.get_bounding_client_rect();
 
-        (bounds.get_x(), bounds.get_y())
+        LogicalPosition {
+            x: bounds.get_x(),
+            y: 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 set_size(&self, size: LogicalSize<f64>) {
-        self.raw.set_width(size.width as u32);
-        self.raw.set_height(size.height as u32);
+    pub fn size(&self) -> PhysicalSize<u32> {
+        PhysicalSize {
+            width: self.raw.width() as u32,
+            height: self.raw.height() as u32,
+        }
     }
 
     pub fn raw(&self) -> &CanvasElement {
@@ -209,12 +207,13 @@ impl Canvas {
 
     pub fn on_cursor_move<F>(&mut self, mut handler: F)
     where
-        F: 'static + FnMut(i32, LogicalPosition, ModifiersState),
+        F: 'static + FnMut(i32, PhysicalPosition<i32>, ModifiersState),
     {
+        // todo
         self.on_cursor_move = Some(self.add_event(move |event: PointerMoveEvent| {
             handler(
                 event.pointer_id(),
-                event::mouse_position(&event),
+                event::mouse_position(&event).to_physical(super::hidpi_factor()),
                 event::mouse_modifiers(&event),
             );
         }));

src/platform_impl/web/stdweb/mod.rs

@@ -5,7 +5,7 @@ mod timeout;
 pub use self::canvas::Canvas;
 pub use self::timeout::Timeout;
 
-use crate::dpi::LogicalSize;
+use crate::dpi::{LogicalSize, Size};
 use crate::platform::web::WindowExtStdweb;
 use crate::window::Window;
 
@@ -41,6 +41,28 @@ pub fn window_size() -> LogicalSize<f64> {
     LogicalSize { width, height }
 }
 
+pub fn hidpi_factor() -> f64 {
+    let window = window();
+    window.device_pixel_ratio()
+}
+
+pub fn set_canvas_size(raw: &CanvasElement, size: Size) {
+    use stdweb::*;
+
+    let hidpi_factor = hidpi_factor();
+
+    let physical_size = size.to_physical::<u32>(hidpi_factor);
+    let logical_size = size.to_logical::<f64>(hidpi_factor);
+
+    raw.set_width(physical_size.width);
+    raw.set_height(physical_size.height);
+
+    js! {
+        @{raw.as_ref()}.style.width = @{logical_size.width} + "px";
+        @{raw.as_ref()}.style.height = @{logical_size.height} + "px";
+    }
+}
+
 pub fn is_fullscreen(canvas: &CanvasElement) -> bool {
     match document().fullscreen_element() {
         Some(elem) => {