From 34363aff127d6649a5f5587be376e884b7d34e85 Mon Sep 17 00:00:00 2001 From: Nick Fitzgerald Date: Wed, 15 Aug 2018 16:56:24 -0700 Subject: [PATCH] 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 --- Cargo.toml | 1 + examples/canvas/.gitignore | 4 ++ examples/canvas/Cargo.toml | 12 +++++ examples/canvas/README.md | 15 +++++++ examples/canvas/build.sh | 15 +++++++ examples/canvas/index.html | 9 ++++ examples/canvas/index.js | 5 +++ examples/canvas/package.json | 10 +++++ examples/canvas/src/lib.rs | 73 +++++++++++++++++++++++++++++++ examples/canvas/webpack.config.js | 10 +++++ 10 files changed, 154 insertions(+) create mode 100644 examples/canvas/.gitignore create mode 100644 examples/canvas/Cargo.toml create mode 100644 examples/canvas/README.md create mode 100755 examples/canvas/build.sh create mode 100644 examples/canvas/index.html create mode 100644 examples/canvas/index.js create mode 100644 examples/canvas/package.json create mode 100755 examples/canvas/src/lib.rs create mode 100644 examples/canvas/webpack.config.js diff --git a/Cargo.toml b/Cargo.toml index 46f7d514256..d76eb37fbf3 100644 --- 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 new file mode 100644 index 00000000000..b2450cc7caf --- /dev/null +++ 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 new file mode 100644 index 00000000000..9012930d90a --- /dev/null +++ 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 new file mode 100644 index 00000000000..a5cf37735b7 --- /dev/null +++ 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 new file mode 100755 index 00000000000..f9273ed4257 --- /dev/null +++ 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 new file mode 100644 index 00000000000..c13b999e414 --- /dev/null +++ b/examples/canvas/index.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/examples/canvas/index.js b/examples/canvas/index.js new file mode 100644 index 00000000000..f4671805039 --- /dev/null +++ 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 new file mode 100644 index 00000000000..41eba8c80fc --- /dev/null +++ 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 new file mode 100755 index 00000000000..05a67b1961c --- /dev/null +++ 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::() + .map_err(|_| ()) + .unwrap(); + + let context = canvas + .get_context_using_context_id("2d") + .unwrap() + .unwrap() + .dyn_into::() + .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 new file mode 100644 index 00000000000..dce2714935e --- /dev/null +++ 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' +};