Add support for drawing a given canvas object instead of an id

Author: 38

examples/wasm-demo/Cargo.toml

@@ -11,6 +11,7 @@ crate-type=['cdylib']
 plotters = {path = "../.."}
 wasm-bindgen = "0.2.43"
 wee_alloc = "*"
+web-sys = { version = "0.3.4", features = ['HtmlCanvasElement'] }
 
 [profile.release]
 lto = true

examples/wasm-demo/src/mandelbrot.rs

@@ -1,6 +1,7 @@
 use plotters::prelude::*;
 use std::ops::Range;
 use wasm_bindgen::prelude::*;
+use web_sys::HtmlCanvasElement;
 
 fn mandelbrot_set(
     real: Range<f64>,
@@ -28,9 +29,9 @@ fn mandelbrot_set(
 }
 
 fn draw_mandelbrot_impl(
-    element: &str,
+    element: HtmlCanvasElement,
 ) -> Result<Box<dyn Fn((i32, i32)) -> Option<(f64, f64)>>, Box<dyn std::error::Error>> {
-    let backend = CanvasBackend::new(element).unwrap();
+    let backend = CanvasBackend::with_canvas_object(element).unwrap();
 
     let root = backend.into_drawing_area();
     root.fill(&WHITE)?;
@@ -66,6 +67,6 @@ fn draw_mandelbrot_impl(
 }
 
 #[wasm_bindgen]
-pub fn draw_mandelbrot(element: &str) -> JsValue {
+pub fn draw_mandelbrot(element: HtmlCanvasElement) -> JsValue {
     crate::make_coord_mapping_closure(draw_mandelbrot_impl(element).ok())
 }

examples/wasm-demo/www/index.html

@@ -60,7 +60,14 @@ <h1 class="centered">Plotters WebAssembly Demo</h1>
 							var pow = Number(sel.selectedOptions[0].value);
 							map_coord = wasm.draw_func("canvas", pow);
 						} else {
-							map_coord = wasm.draw_mandelbrot("canvas");
+							// Actually, you can directly use the #canvas element, 
+							// This is just a illustration for how we can do double buffering
+							// with plotters
+							var buffer = document.createElement("canvas");
+							buffer.height = 400;
+							buffer.width = 600;
+							map_coord = wasm.draw_mandelbrot(buffer);
+							document.getElementById("canvas").getContext("2d").drawImage(buffer, 0, 0);
 						}
 						var end = performance.now();
 						stat.innerText = "Rendered " + sel.selectedOptions[0].innerText + " in " + (end - start) + "ms";