Is there a way to initialize WGPU with HTMLCanvas/WebGlRenderingContext?

[Umenokin]

Hi folks!

As a way to learn rust, I want to migrate my TypeScript/WebGL2 pet project to WASM. I have WebGL2 context from HTML canvas and generally have no issues working directly with WebGL but it seems like working with WGPU will give me the ability to effortlessly switch to WebGPU once it goes live officially.

Is there a way to initialize WGPU in an HTML environment where I create and manage HTMLCanvas myself which means that I need to pass WebGlRenderingContext during WGPU initialization as well as manage events like canvas resizing myself?

Maybe there is a working example?

Thanks!

[grovesNL]

Hi @Umenokin! 👋

You should be able to pass a WebGlRenderingContext using instance.create_surface_from_canvas

wgpu/wgpu/src/lib.rs

Line 1796 in ea05b44

pub fn create_surface_from_canvas(&self, canvas: &web_sys::HtmlCanvasElement) -> Surface {

when you're using the wasm target.

[Umenokin]

Awesome, thanks @grovesNL !!! 😊

[ALPHAAAL]

Hi, I am trying to get wgpu working with HTML canvas as well.

Basically, what I am trying to achieve is
Start animation -> draw frame 1 - 1000 of the animation -> pause it -> do something on js side -> draw frames 2000 - 3000 (I intentionally skip frames, but it shouldn't matter).

I originally tried to use winit as the surface, however, I am not able to figure out how to pause the animation and start it again without creating new event loop (winit doesn't allow creating multiple event loops).

I tried to use create_surface_from_canvas as mentioned by @grovesNL in this thread, however, it seems like the frame rate is much lower than using winit for some reason, and I am not able to figure out why.

Any guidance would be nice, thanks! 😭

[anthonydito]

As of Mar. 2024, the accepted answer isn't up to date with the newest version of wgpu. To create a surface from a canvas, you can do.

let html_canvas: HtmlCanvasElement = ...
let instance = wgpu::Instance::new(InstanceDescriptor {
    backends: wgpu::Backends::all(),
    ..InstanceDescriptor::default()
});
let surface_target = SurfaceTarget::Canvas(html_canvas);
let surface = instance.create_surface(surface_target)