[egui_web] Add max canvas size to help perf issues on some platforms

Related: https://github.com/emilk/egui/issues/67

docs/index.html

@@ -14,7 +14,7 @@
         }
 
         body {
-            background: #101010;
+            background: #202020;
         }
 
         /* Allow canvas to fill entire web page: */
@@ -24,6 +24,17 @@
             margin: 0 !important;
             padding: 0 !important;
         }
+
+        /* Center canvas vertically and horizontally: */
+        canvas {
+            margin-right: auto;
+            margin-left: auto;
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     </style>
 </head>
 

egui_web/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to the `egui_web` integration will be noted in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 
+## Unreleased
+
+### Changed ⭐
+
+* Set a maximum canvas size to alleviate performance issues on some machines
+
+
 ## 0.4.0 - 2020-11-28
 
 ### Added ⭐

egui_web/src/backend.rs

@@ -114,12 +114,9 @@ pub struct WebInput {
 }
 
 impl WebInput {
-    pub fn new_frame(&mut self) -> egui::RawInput {
+    pub fn new_frame(&mut self, canvas_size: egui::Vec2) -> egui::RawInput {
         egui::RawInput {
-            screen_rect: Some(egui::Rect::from_min_size(
+            screen_rect: Some(egui::Rect::from_min_size(Default::default(), canvas_size)),
-                Default::default(),
-                screen_size_in_native_points().unwrap(),
-            )),
             pixels_per_point: Some(native_pixels_per_point()),
             time: Some(now_sec()),
             ..self.raw.take()
@@ -181,8 +178,8 @@ impl AppRunner {
 
     pub fn logic(&mut self) -> Result<(egui::Output, egui::PaintJobs), JsValue> {
         resize_canvas_to_screen_size(self.web_backend.canvas_id());
-
+        let canvas_size = canvas_size_in_points(self.web_backend.canvas_id());
-        let raw_input = self.input.new_frame();
+        let raw_input = self.input.new_frame(canvas_size);
         self.web_backend.begin_frame(raw_input);
 
         let mut integration_context = egui::app::IntegrationContext {

egui_web/src/lib.rs

@@ -92,25 +92,43 @@ pub fn pos_from_touch_event(event: &web_sys::TouchEvent) -> egui::Pos2 {
     }
 }
 
+pub fn canvas_size_in_points(canvas_id: &str) -> egui::Vec2 {
+    let canvas = canvas_element(canvas_id).unwrap();
+    let pixels_per_point = native_pixels_per_point();
+    egui::vec2(
+        canvas.width() as f32 / pixels_per_point,
+        canvas.height() as f32 / pixels_per_point,
+    )
+}
+
 pub fn resize_canvas_to_screen_size(canvas_id: &str) -> Option<()> {
     let canvas = canvas_element(canvas_id)?;
 
-    let screen_size = screen_size_in_native_points()?;
+    let screen_size_points = screen_size_in_native_points()?;
     let pixels_per_point = native_pixels_per_point();
+
+    let canvas_size_pixels = pixels_per_point * screen_size_points;
+    // Some browsers get slow with huge WebGL canvases, so we limit the size:
+    let max_size_pixels = egui::vec2(2048.0, 4096.0);
+    let canvas_size_pixels = canvas_size_pixels.min(max_size_pixels);
+    let canvas_size_points = canvas_size_pixels / pixels_per_point;
+
     canvas
         .style()
-        .set_property("width", &format!("{}px", screen_size.x))
+        .set_property("width", &format!("{}px", canvas_size_points.x))
         .ok()?;
     canvas
         .style()
-        .set_property("height", &format!("{}px", screen_size.y))
+        .set_property("height", &format!("{}px", canvas_size_points.y))
         .ok()?;
-    canvas.set_width((screen_size.x * pixels_per_point).round() as u32);
+    canvas.set_width(canvas_size_pixels.x.round() as u32);
-    canvas.set_height((screen_size.y * pixels_per_point).round() as u32);
+    canvas.set_height(canvas_size_pixels.y.round() as u32);
 
     Some(())
 }
 
+// ----------------------------------------------------------------------------
+
 pub fn local_storage() -> Option<web_sys::Storage> {
     web_sys::window()?.local_storage().ok()?
 }