diff --git a/Cargo.toml b/Cargo.toml
index 8b205568e13e4..0c997a8f9e66c 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -274,4 +274,4 @@ required-features = []
 [[example]]
 name = "winit_wasm"
 path = "examples/wasm/winit_wasm.rs"
-required-features = []
+required-features = ["bevy_winit"]
diff --git a/crates/bevy_winit/Cargo.toml b/crates/bevy_winit/Cargo.toml
index 8d7b7a64733ea..30f97a85bb532 100644
--- a/crates/bevy_winit/Cargo.toml
+++ b/crates/bevy_winit/Cargo.toml
@@ -31,3 +31,4 @@ log = { version = "0.4", features = ["release_max_level_info"] }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 winit = { version = "0.22.2", package = "cart-tmp-winit", features = ["web-sys"] }
+web-sys = "0.3"
diff --git a/crates/bevy_winit/src/winit_windows.rs b/crates/bevy_winit/src/winit_windows.rs
index 3eb1aac00a229..9ec2c88e15fa2 100644
--- a/crates/bevy_winit/src/winit_windows.rs
+++ b/crates/bevy_winit/src/winit_windows.rs
@@ -46,6 +46,20 @@ impl WinitWindows {
         self.window_id_to_winit.insert(window.id, winit_window.id());
         self.winit_to_window_id.insert(winit_window.id(), window.id);
 
+        #[cfg(target_arch = "wasm32")]
+        {
+            use winit::platform::web::WindowExtWebSys;
+
+            let canvas = winit_window.canvas();
+
+            let window = web_sys::window().unwrap();
+            let document = window.document().unwrap();
+            let body = document.body().unwrap();
+
+            body.append_child(&canvas)
+                .expect("Append canvas to HTML body");
+        }
+
         self.windows.insert(winit_window.id(), winit_window);
     }
 
diff --git a/examples/README.md b/examples/README.md
index 117e11d3b3f58..48ede21f9d878 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -126,6 +126,10 @@ Example | File | Description
 
 #### build & run
 
+Following is an example for `headless_wasm`. For other examples in wasm/ directory,
+change the `headless_wasm` in the following commands **and edit** `examples/wasm/index.html`
+to point to the correct `.js` file.
+
     $ cargo build --example headless_wasm --target wasm32-unknown-unknown --no-default-features
     $ wasm-bindgen --out-dir examples/wasm/target --target web target/wasm32-unknown-unknown/debug/examples/headless_wasm.wasm
 
diff --git a/examples/wasm/index.html b/examples/wasm/index.html
index 929142536e8ad..33f18ca24fdf7 100644
--- a/examples/wasm/index.html
+++ b/examples/wasm/index.html
@@ -1,6 +1,24 @@
 <html>
   <head>
     <meta charset="UTF-8" />
+    <style>
+      body {
+        background: linear-gradient(
+          135deg,
+          white 0%,
+          white 49%,
+          black 49%,
+          black 51%,
+          white 51%,
+          white 100%
+        );
+        background-repeat: repeat;
+        background-size: 20px 20px;
+      }
+      canvas {
+        background-color: white;
+      }
+    </style>
   </head>
   <script type="module">
     import init from './target/headless_wasm.js'
diff --git a/examples/wasm/winit_wasm.rs b/examples/wasm/winit_wasm.rs
index c05c4c9b3b7c0..7759d141a6c78 100644
--- a/examples/wasm/winit_wasm.rs
+++ b/examples/wasm/winit_wasm.rs
@@ -1,5 +1,11 @@
 extern crate console_error_panic_hook;
-use bevy::prelude::*;
+use bevy::{
+    input::{
+        keyboard::KeyboardInput,
+        mouse::{MouseButtonInput, MouseMotion, MouseWheel},
+    },
+    prelude::*,
+};
 use std::panic;
 
 fn main() {
@@ -7,9 +13,19 @@ fn main() {
     console_log::init_with_level(log::Level::Debug).expect("cannot initialize console_log");
 
     App::build()
+        .add_resource(WindowDescriptor {
+            width: 300,
+            height: 300,
+            ..Default::default()
+        })
         .add_default_plugins()
+        // One time greet
         .add_startup_system(hello_wasm_system.system())
+        // Track ticks (sanity check, whether game loop is running)
         .add_system(counter.system())
+        // Track input events
+        .init_resource::<TrackInputState>()
+        .add_system(track_input_events.system())
         .run();
 }
 
@@ -33,3 +49,58 @@ fn counter(mut state: Local<CounterState>, time: Res<Time>) {
 struct CounterState {
     count: u32,
 }
+
+#[derive(Default)]
+struct TrackInputState {
+    keys: EventReader<KeyboardInput>,
+    cursor: EventReader<CursorMoved>,
+    motion: EventReader<MouseMotion>,
+    mousebtn: EventReader<MouseButtonInput>,
+    scroll: EventReader<MouseWheel>,
+}
+
+fn track_input_events(
+    mut state: ResMut<TrackInputState>,
+    ev_keys: Res<Events<KeyboardInput>>,
+    ev_cursor: Res<Events<CursorMoved>>,
+    ev_motion: Res<Events<MouseMotion>>,
+    ev_mousebtn: Res<Events<MouseButtonInput>>,
+    ev_scroll: Res<Events<MouseWheel>>,
+) {
+    // Keyboard input
+    for ev in state.keys.iter(&ev_keys) {
+        if ev.state.is_pressed() {
+            log::info!("Just pressed key: {:?}", ev.key_code);
+        } else {
+            log::info!("Just released key: {:?}", ev.key_code);
+        }
+    }
+
+    // Absolute cursor position (in window coordinates)
+    for ev in state.cursor.iter(&ev_cursor) {
+        log::info!("Cursor at: {}", ev.position);
+    }
+
+    // Relative mouse motion
+    for ev in state.motion.iter(&ev_motion) {
+        log::info!("Mouse moved {} pixels", ev.delta);
+    }
+
+    // Mouse buttons
+    for ev in state.mousebtn.iter(&ev_mousebtn) {
+        if ev.state.is_pressed() {
+            log::info!("Just pressed mouse button: {:?}", ev.button);
+        } else {
+            log::info!("Just released mouse button: {:?}", ev.button);
+        }
+    }
+
+    // scrolling (mouse wheel, touchpad, etc.)
+    for ev in state.scroll.iter(&ev_scroll) {
+        log::info!(
+            "Scrolled vertically by {} and horizontally by {}.",
+            ev.y,
+            ev.x
+        );
+    }
+}
