Make Nannou run in WASM environment

nannou/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "nannou"
-version ="0.18.0"
+version = "0.18.0"
 authors = ["mitchmindtree <mitchell.nordine@gmail.com>"]
 description = "A Creative Coding Framework for Rust."
 readme = "README.md"
@@ -30,6 +30,7 @@ serde_derive = "1"
 serde_json = "1"
 toml = "0.5"
 walkdir = "2"
+web-sys = { version = "0.3.55", optional = true }
 wgpu_upstream = { version = "0.11.1", package = "wgpu" }
 winit = "0.26"
 
@@ -38,4 +39,4 @@ default = ["notosans"]
 # Enables SPIR-V support in the `wgpu` module.
 spirv = ["nannou_wgpu/spirv"]
 # Enables experimental WASM compilation for CI-use only
-wasm-experimental = ["getrandom/js", "wgpu_upstream/webgl", "async-std/unstable"]
+wasm-experimental = ["getrandom/js", "web-sys", "wgpu_upstream/webgl", "async-std/unstable"]

nannou/src/window.rs

@@ -862,6 +862,21 @@ impl<'app> Builder<'app> {
             window.build(window_target)?
         };
 
+        #[cfg(target_arch = "wasm32")]
+        {
+            use winit::platform::web::WindowExtWebSys;
+            let canvas = window.canvas();
+
+            web_sys::window()
+                .expect("window")
+                .document()
+                .expect("document")
+                .body()
+                .expect("body")
+                .append_child(&canvas)
+                .expect("append_child");
+        }
+
         // Build the wgpu surface.
         let surface = unsafe { app.instance().create_surface(&window) };