fixed wasm demo

demo/Cargo.toml

@@ -4,10 +4,12 @@ version = "0.8.0"
 edition = "2021"
 
 [dependencies]
-eframe = "0.30"
+eframe = "0.31"
 egui-toast = { path = ".." }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook = "0.1.7"
 tracing-wasm = "0.2"
+web-sys = "0.3"
+wasm-bindgen = "0.2.100"
 wasm-bindgen-futures = "0.4"

demo/index.html

@@ -47,9 +47,10 @@
             margin-left: auto;
             display: block;
             position: absolute;
-            top: 0%;
-            left: 50%;
-            transform: translate(-50%, 0%);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
 
         .centered {
@@ -79,9 +80,8 @@
             display: block;
             width: 24px;
             height: 24px;
-            margin: 0px;
+            margin: 0;
             border-radius: 50%;
-            border: 3px solid #fff;
             border-color: #fff transparent #fff transparent;
             animation: lds-dual-ring 1.2s linear infinite;
         }

demo/src/main.rs

@@ -29,11 +29,30 @@ fn main() {
 
     let web_options = eframe::WebOptions::default();
 
+
+    // Retrieve canvas from index.html
+    // Starting from eframe 0.29:
+    // * `WebRunner::start` now expects a `HtmlCanvasElement` rather than the id of it ([#4780](https://github.com/emilk/egui/pull/4780))
+    fn get_canvas_element_by_id_or_die(canvas_id: &str) -> web_sys::HtmlCanvasElement {
+        use wasm_bindgen::JsCast;
+        let window = web_sys::window()
+            .unwrap_or_else(|| panic!("Failed to retrieve the window instance"));
+        let document = window.document()
+            .unwrap_or_else(|| panic!("Failed to retrieve the document instance"));
+        let canvas = document.get_element_by_id(canvas_id)
+            .unwrap_or_else(|| panic!("Failed to find element with id {canvas_id:?}"));
+        let c = canvas.dyn_into::<web_sys::HtmlCanvasElement>().ok();
+        c.unwrap_or_else(|| panic!("Failed to find canvas with id {canvas_id:?}"))
+    }
+
+    let canvas = get_canvas_element_by_id_or_die("canvas");
+
     wasm_bindgen_futures::spawn_local(async {
-        eframe::start_web(
-            "canvas",
+        eframe::WebRunner::new()
+            .start(
+            canvas,
             web_options,
-            Box::new(|_cc| Box::<Demo>::default()),
+            Box::new(|_cc| Ok(Box::<Demo>::default())),
         )
         .await
         .expect("failed to start eframe");
@@ -201,8 +220,8 @@ impl Demo {
 fn my_custom_toast_contents(ui: &mut egui::Ui, toast: &mut Toast) -> egui::Response {
     Frame::default()
         .fill(Color32::from_rgb(33, 150, 243))
-        .inner_margin(Margin::same(12.0))
-        .rounding(4.0)
+        .inner_margin(Margin::same(12))
+        .corner_radius(4)
         .show(ui, |ui| {
             ui.label(toast.text.clone().color(Color32::WHITE).monospace());