web: Add Instance::create_surface_from_canvas

Add specialized methods on web for creating a wgpu Surface directly
from an web_sys::HTMLCanvasElement and OffscreenCanvas.

 * Instance::create_surface_from_canvas
 * Instance::create_surface_from_offscreen_canvas

Fixes #1837.

wgpu/Cargo.toml

@@ -269,6 +269,7 @@ web-sys = { version = "0.3.53", features = [
     "GpuVertexState",
     "GpuVertexStepMode",
     "HtmlCanvasElement",
+    "OffscreenCanvas",
     "Window",
 ]}
 js-sys = "0.3.50"

wgpu/src/backend/web.rs

@@ -887,6 +887,30 @@ fn future_map_async(result: JsFutureResult) -> Result<(), crate::BufferAsyncErro
     result.map(|_| ()).map_err(|_| crate::BufferAsyncError)
 }
 
+impl Context {
+    pub fn instance_create_surface_from_canvas(
+        &self,
+        canvas: &web_sys::HtmlCanvasElement,
+    ) -> <Self as crate::Context>::SurfaceId {
+        let context: wasm_bindgen::JsValue = match canvas.get_context("webgpu") {
+            Ok(Some(ctx)) => ctx.into(),
+            _ => panic!("expected to get context from canvas"),
+        };
+        Sendable(context.into())
+    }
+
+    pub fn instance_create_surface_from_offscreen_canvas(
+        &self,
+        canvas: &web_sys::OffscreenCanvas,
+    ) -> <Self as crate::Context>::SurfaceId {
+        let context: wasm_bindgen::JsValue = match canvas.get_context("webgpu") {
+            Ok(Some(ctx)) => ctx.into(),
+            _ => panic!("expected to get context from canvas"),
+        };
+        Sendable(context.into())
+    }
+}
+
 impl crate::Context for Context {
     type AdapterId = Sendable<web_sys::GpuAdapter>;
     type DeviceId = Sendable<web_sys::GpuDevice>;
@@ -949,11 +973,7 @@ impl crate::Context for Context {
             .expect("expected to find single canvas")
             .into();
         let canvas_element: web_sys::HtmlCanvasElement = canvas_node.into();
-        let context: wasm_bindgen::JsValue = match canvas_element.get_context("webgpu") {
-            Ok(Some(ctx)) => ctx.into(),
-            _ => panic!("expected to get context from canvas"),
-        };
-        Sendable(context.into())
+        self.instance_create_surface_from_canvas(&canvas_element)
     }
 
     fn adapter_is_surface_supported(

wgpu/src/lib.rs

@@ -1480,6 +1480,40 @@ impl Instance {
         self.context.create_surface_from_core_animation_layer(layer)
     }
 
+    /// Creates a surface from a `web_sys::HtmlCanvasElement`.
+    ///
+    /// # Safety
+    ///
+    /// - canvas must be a valid <canvas> element to create a surface upon.
+    #[cfg(target_arch = "wasm32")]
+    pub unsafe fn create_surface_from_canvas(
+        &self,
+        canvas: &web_sys::HtmlCanvasElement,
+    ) -> Surface {
+        Surface {
+            context: Arc::clone(&self.context),
+            id: self.context.instance_create_surface_from_canvas(canvas),
+        }
+    }
+
+    /// Creates a surface from a `web_sys::OffscreenCanvas`.
+    ///
+    /// # Safety
+    ///
+    /// - canvas must be a valid OffscreenCanvas to create a surface upon.
+    #[cfg(target_arch = "wasm32")]
+    pub unsafe fn create_surface_from_offscreen_canvas(
+        &self,
+        canvas: &web_sys::OffscreenCanvas,
+    ) -> Surface {
+        Surface {
+            context: Arc::clone(&self.context),
+            id: self
+                .context
+                .instance_create_surface_from_offscreen_canvas(canvas),
+        }
+    }
+
     /// Polls all devices.
     /// If `force_wait` is true and this is not running on the web,
     /// then this function will block until all in-flight buffers have been mapped.