Control the maximum egui web canvas size with App::max_size_points

egui_demo_lib/src/wrap_app.rs

@@ -50,6 +50,10 @@ impl epi::App for WrapApp {
         epi::set_value(storage, epi::APP_KEY, self);
     }
 
+    fn max_size_points(&self) -> egui::Vec2 {
+        self.backend_panel.max_size_points_active
+    }
+
     fn warm_up_enabled(&self) -> bool {
         // The example windows use a lot of emojis. Pre-cache them by running one frame where everything is open
         #[cfg(debug_assertions)]
@@ -194,7 +198,6 @@ impl Default for RunMode {
 
 // ----------------------------------------------------------------------------
 
-#[derive(Default)]
 #[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
 #[cfg_attr(feature = "persistence", serde(default))]
 struct BackendPanel {
@@ -207,10 +210,27 @@ struct BackendPanel {
     /// current slider value for current gui scale
     pixels_per_point: Option<f32>,
 
+    /// maximum size of the web browser canvas
+    max_size_points_ui: egui::Vec2,
+    max_size_points_active: egui::Vec2,
+
     #[cfg_attr(feature = "persistence", serde(skip))]
     frame_history: crate::frame_history::FrameHistory,
 }
 
+impl Default for BackendPanel {
+    fn default() -> Self {
+        Self {
+            open: false,
+            run_mode: Default::default(),
+            pixels_per_point: Default::default(),
+            max_size_points_ui: egui::Vec2::new(1024.0, 2048.0),
+            max_size_points_active: egui::Vec2::new(1024.0, 2048.0),
+            frame_history: Default::default(),
+        }
+    }
+}
+
 impl BackendPanel {
     fn update(&mut self, ctx: &egui::CtxRef, frame: &mut epi::Frame<'_>) {
         self.frame_history
@@ -251,6 +271,19 @@ impl BackendPanel {
                 ui.label("Project home page:");
                 ui.hyperlink("https://github.com/emilk/egui");
             });
+
+            ui.separator();
+
+            ui.add(
+                egui::Slider::f32(&mut self.max_size_points_ui.x, 512.0..=f32::INFINITY)
+                    .logarithmic(true)
+                    .largest_finite(8192.0)
+                    .text("Max width"),
+            )
+            .on_hover_text("Maximum width of the egui region of the web page.");
+            if !ui.ctx().is_using_pointer() {
+                self.max_size_points_active = self.max_size_points_ui;
+            }
         } else {
             if ui
                 .button("📱 Phone Size")

egui_web/CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+### Added ⭐
+
+* You can control the maximum egui canvas size with `App::max_size_points`.
+
 
 ## 0.9.0 - 2021-02-07
 

egui_web/src/backend.rs

@@ -191,7 +191,7 @@ impl AppRunner {
     }
 
     pub fn logic(&mut self) -> Result<(egui::Output, Vec<egui::ClippedMesh>), JsValue> {
-        resize_canvas_to_screen_size(self.web_backend.canvas_id());
+        resize_canvas_to_screen_size(self.web_backend.canvas_id(), self.app.max_size_points());
         let canvas_size = canvas_size_in_points(self.web_backend.canvas_id());
         let raw_input = self.input.new_frame(canvas_size);
         self.web_backend.begin_frame(raw_input);

egui_web/src/lib.rs

@@ -123,15 +123,15 @@ pub fn canvas_size_in_points(canvas_id: &str) -> egui::Vec2 {
     )
 }
 
-pub fn resize_canvas_to_screen_size(canvas_id: &str) -> Option<()> {
+pub fn resize_canvas_to_screen_size(canvas_id: &str, max_size_points: egui::Vec2) -> Option<()> {
     let canvas = canvas_element(canvas_id)?;
 
     let screen_size_points = screen_size_in_native_points()?;
     let pixels_per_point = native_pixels_per_point();
 
+    let max_size_pixels = pixels_per_point * max_size_points;
+
     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;
 

epi/CHANGELOG.md

@@ -7,6 +7,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+* You can control the maximum egui web canvas size with `App::max_size_points`.
+
 
 ## 0.9.0 - 2021-02-07
 

epi/src/lib.rs

@@ -97,6 +97,12 @@ pub trait App {
         true
     }
 
+    /// The size limit of the web app canvas
+    fn max_size_points(&self) -> egui::Vec2 {
+        // Some browsers get slow with huge WebGL canvases, so we limit the size:
+        egui::Vec2::new(1024.0, 2048.0)
+    }
+
     /// Background color for the app, e.g. what is sent to `gl.clearColor`.
     /// This is the background of your windows if you don't set a central panel.
     fn clear_color(&self) -> egui::Rgba {