first canvas drawing

2 years ago · 681139064e
commit 681139064e
5 changed files with 91 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+/target
+Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@ -0,0 +1,22 @@
+[package]
+name = "circle_canvas"
+version = "0.1.0"
+authors = ["Histausse"]
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+js-sys = "0.3.55"
+wasm-bindgen = "0.2.78"
+
+[dependencies.web-sys]
+version = "0.3.4"
+features = [
+  'CanvasRenderingContext2d',
+  'Document',
+  'Element',
+  'HtmlCanvasElement',
+  'Window',
+]
--- a/README.md
+++ b/README.md
@ -0,0 +1,11 @@
+# Build:
+
+```
+wasm-pack build --target web
+```
+
+# Run:
+
+```
+python3 -m http.server
+```
--- a/index.html
+++ b/index.html
@ -0,0 +1,18 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+  </head>
+  <body>
+    <script type="module">
+      import init from "./pkg/circle_canvas.js";
+
+      async function run() {
+        await init();
+      }
+
+      run();
+    </script>
+	<canvas id="canvas" height="150" width="150"></canvas>
+  </body>
+</html>
+
--- a/src/lib.rs
+++ b/src/lib.rs
@ -0,0 +1,38 @@
+use std::f64;
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+
+#[wasm_bindgen(start)]
+pub fn start() {
+  let document = web_sys::window().unwrap().document().unwrap();
+  let canvas = document.get_element_by_id("canvas").unwrap();
+  let canvas: web_sys::HtmlCanvasElement = canvas
+      .dyn_into::<web_sys::HtmlCanvasElement>()
+      .map_err(|_| ())
+      .unwrap();
+  
+  let context = canvas
+    .get_context("2d")
+    .unwrap()
+    .unwrap()
+    .dyn_into::<web_sys::CanvasRenderingContext2d>()
+    .unwrap();
+
+  context.begin_path();
+
+  context
+    .arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0)
+    .unwrap();
+
+  context.move_to(110.0, 75.0);
+  context
+    .arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI)
+    .unwrap();
+  
+  context.move_to(65.0, 65.0);
+  context
+    .arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
+    .unwrap();
+
+  context.stroke();
+}