feat: Started working on canvas background, got something working in the end, wasted a lot of time figuring out dependencies

Cargo.lock

@@ -1424,6 +1424,7 @@ dependencies = [
  "cfg-if",
  "console_error_panic_hook",
  "console_log",
+ "js-sys",
  "leptos",
  "leptos_actix",
  "leptos_meta",
@@ -1431,6 +1432,7 @@ dependencies = [
  "log",
  "simple_logger",
  "wasm-bindgen",
+ "web-sys",
 ]
 
 [[package]]

Cargo.toml

@@ -20,7 +20,18 @@ leptos_actix = { version = "0.2", optional = true }
 leptos_router = { version = "0.2", default-features = false }
 log = "0.4"
 simple_logger = "4"
-wasm-bindgen = "0.2"
+wasm-bindgen = "=0.2.84"
+js-sys = "0.3.51"
+
+[dependencies.web-sys]
+version = "0.3.4"
+features = [
+  'CanvasRenderingContext2d',
+  'Document',
+  'Element',
+  'HtmlCanvasElement',
+  'Window',
+]
 
 [features]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]

src/app.rs

@@ -1,3 +1,5 @@
+use crate::components::BackgroundProps;
+use crate::components::Background;
 use crate::routes::whymdc::*;
 use crate::routes::home::*;
 use crate::routes::blog::*;
@@ -23,17 +25,18 @@ pub fn App(cx: Scope) -> impl IntoView {
         // content for this welcome page
         <Router>
             <main class="text-white bg-indigo-950 min-h-screen ">
-            <div class="max-w-3xl container mx-auto p-4 md:p-0 md:pb-14">
+            <Background />
-                <nav class="py-4 flex space-x-4">
+                <div class="max-w-3xl container mx-auto p-4 md:p-0 md:pb-14">
-                    <a href="/">"Home"</a>
+                    <nav class="py-4 flex space-x-4">
-                    <a href="/blog">"Blog"</a>
+                        <a href="/">"Home"</a>
-                </nav>
+                        <a href="/blog">"Blog"</a>
-                <hr />
+                    </nav>
-                <Routes>
+                    <hr />
-                    <Route path="" view=|cx| view! { cx, <HomePage/> }/>
+                    <Routes>
-                    <Route path="/why-micro-datacenters" view=|cx| view! { cx, <WhyMicroDatacenters/> }/>
+                        <Route path="" view=|cx| view! { cx, <HomePage/> }/>
-                    <Route path="/blog" view=|cx| view! { cx, <Blog/> }/>
+                        <Route path="/why-micro-datacenters" view=|cx| view! { cx, <WhyMicroDatacenters/> }/>
-                </Routes>
+                        <Route path="/blog" view=|cx| view! { cx, <Blog/> }/>
+                    </Routes>
                 </div>
             </main>
         </Router>

src/components/background.rs

@@ -0,0 +1,76 @@
+
+use std::f64;
+use leptos::html::Canvas;
+use leptos::*;
+use wasm_bindgen::JsCast;
+
+#[component]
+pub fn Background(cx: Scope) -> impl IntoView {
+    let canvas = create_node_ref::<Canvas>(cx);
+
+    canvas.on_load(cx, move |_| {
+        log!("in canvas");
+        let context = canvas
+            .get()
+            .expect("canvas is mounted")
+            .get_context("2d")
+            .ok()
+            .flatten()
+            .expect("canvas to have context")
+            .unchecked_into::<web_sys::CanvasRenderingContext2d>();
+        log!("context = {:#?}", context);
+        context.begin_path();
+
+        // Draw the outer circle.
+        context
+            .arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0)
+            .unwrap();
+
+        // Draw the mouth.
+        context.move_to(110.0, 75.0);
+        context.arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI).unwrap();
+
+        // Draw the left eye.
+        context.move_to(65.0, 65.0);
+        context
+            .arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
+            .unwrap();
+
+        // Draw the right eye.
+        context.move_to(95.0, 65.0);
+        context
+            .arc(90.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
+            .unwrap();
+
+        context.stroke();
+    });
+    view! { cx,
+        <div class="canvas border-solid border-white border-2 fixed h-screen w-screen">
+            <canvas node_ref=canvas></canvas>
+        </div>
+    }
+}
+
+// #[component]
+// fn ComponentA(cx: Scope) -> impl IntoView {
+//     let canvas = NodeRef::<HtmlElement<Canvas>>::new(cx);
+//     let on_click = move |_| {
+//         // checks to see if node has been rendered
+//         let context = canvas.get()
+//             // if you're able to click the button, canvas should already be there
+//             .expect("canvas to have been mounted")
+//             // here's the getContext() call
+//             .get_context("2d")
+//             // it returns Result<Option<Object>, ...>
+//             // so we massage the types a little
+//             .ok()
+//             .flatten()
+//             .expect("canvas to have context")
+//             .unchecked_into::<web_sys::CanvasRenderingContext2d>();
+//         leptos::log!("context = {:#?}", context);
+//     };
+//     view! { cx,
+//         <button on:click=on_click>"Click me"</button>
+//         <canvas node_ref=canvas></canvas>
+//     }
+// }

src/components/mod.rs

@@ -1,4 +1,6 @@
 mod codeblock;
 mod code;
+mod background;
 pub use codeblock::*;
 pub use code::*;
+pub use background::*;