example: Add an example of drawing a smiley face with canvas

Adapted from https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
kraai · Aug 16, 2018 · 34363af · 34363af
1 parent b8afa0a
commit 34363af
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 0 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -50,6 +50,7 @@ members = [
   "crates/webidl-tests",
   "examples/add",
   "examples/asm.js",
+  "examples/canvas",
   "examples/char",
   "examples/closures",
   "examples/comments",

diff --git a/examples/canvas/.gitignore b/examples/canvas/.gitignore
@@ -0,0 +1,4 @@
+package-lock.json
+wasm_bindgen_canvas_demo.js
+wasm_bindgen_canvas_demo_bg.js
+wasm_bindgen_canvas_demo_bg.wasm
diff --git a/examples/canvas/Cargo.toml b/examples/canvas/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "wasm-bindgen-canvas-demo"
+version = "0.1.0"
+authors = ["The wasm-bindgen Developers"]
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+js-sys = { path = "../../crates/js-sys" }
+wasm-bindgen = { path = "../.." }
+web-sys = { path = "../../crates/web-sys" }
diff --git a/examples/canvas/README.md b/examples/canvas/README.md
@@ -0,0 +1,15 @@
+# Canvas 2D Example
+
+This directory is an example of using the `web-sys` crate to draw on a 2D
+canvas.
+
+You can build and run the example with:
+
+```
+$ ./build.sh
+```
+
+(or running the commands on Windows manually)
+
+and then opening up `http://localhost:8080/` in a web browser should show a
+smiley face drawn on canvas by Rust and WebAssembly.
diff --git a/examples/canvas/build.sh b/examples/canvas/build.sh
@@ -0,0 +1,15 @@
+#!/bin/sh
+
+# For more coments about what's going on here, see the `hello_world` example
+
+set -ex
+cd "$(dirname $0)"
+
+cargo +nightly build --target wasm32-unknown-unknown
+
+cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \
+  --bin wasm-bindgen -- \
+  ../../target/wasm32-unknown-unknown/debug/wasm_bindgen_canvas_demo.wasm --out-dir .
+
+npm install
+npm run serve
diff --git a/examples/canvas/index.html b/examples/canvas/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+  </head>
+  <body>
+    <canvas id="canvas" height="150" width="150" />
+    <script src='./index.js'></script>
+  </body>
+</html>
diff --git a/examples/canvas/index.js b/examples/canvas/index.js
@@ -0,0 +1,5 @@
+// For more comments about what's going on here, check out the `hello_world`
+// example.
+import('./wasm_bindgen_canvas_demo').then(canvas => {
+  canvas.draw();
+});
diff --git a/examples/canvas/package.json b/examples/canvas/package.json
@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "serve": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "webpack": "^4.11.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0"
+  }
+}
diff --git a/examples/canvas/src/lib.rs b/examples/canvas/src/lib.rs
@@ -0,0 +1,73 @@
+#![feature(use_extern_macros)]
+
+extern crate js_sys;
+extern crate wasm_bindgen;
+extern crate web_sys;
+
+use std::f64;
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+
+#[wasm_bindgen]
+extern "C" {
+    static document: web_sys::Document;
+}
+
+#[wasm_bindgen]
+pub fn draw() {
+    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_using_context_id("2d")
+        .unwrap()
+        .unwrap()
+        .dyn_into::<web_sys::CanvasRenderingContext2D>()
+        .unwrap();
+
+    context.begin_path();
+
+    // Draw the outer circle.
+    context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
+        75.0,
+        75.0,
+        50.0,
+        0.0,
+        f64::consts::PI * 2.0,
+    );
+
+    // Draw the mouth.
+    context.move_to(110.0, 75.0);
+    context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
+        75.0,
+        75.0,
+        35.0,
+        0.0,
+        f64::consts::PI,
+    );
+
+    // Draw the left eye.
+    context.move_to(65.0, 65.0);
+    context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
+        60.0,
+        65.0,
+        5.0,
+        0.0,
+        f64::consts::PI * 2.0,
+    );
+
+    // Draw the right eye.
+    context.move_to(95.0, 65.0);
+    context.arc_using_x_and_y_and_radius_and_start_angle_and_end_angle(
+        90.0,
+        65.0,
+        5.0,
+        0.0,
+        f64::consts::PI * 2.0,
+    );
+
+    context.stroke();
+}
diff --git a/examples/canvas/webpack.config.js b/examples/canvas/webpack.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+    entry: './index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'index.js',
+    },
+    mode: 'development'
+};