web: use get_preferred_canvas_format() to fill SurfaceCapabilities

CHANGELOG.md

@@ -89,6 +89,10 @@ Bottom level categories:
 
 - Disable suballocation on Intel Iris(R) Xe. By @xiaopengli89 in [#3668](https://github.com/gfx-rs/wgpu/pull/3668)
 
+#### WebGPU
+
+- Use `get_preferred_canvas_format()` to fill `formats` of `SurfaceCapabilities`. By @jinleili in [#3744](https://github.com/gfx-rs/wgpu/pull/3744)
+
 ### Examples
 
 #### General

wgpu/src/backend/web.rs

@@ -1113,13 +1113,28 @@ impl crate::context::Context for Context {
         _adapter: &Self::AdapterId,
         _adapter_data: &Self::AdapterData,
     ) -> wgt::SurfaceCapabilities {
+        let mut formats = vec![
+            wgt::TextureFormat::Rgba8Unorm,
+            wgt::TextureFormat::Bgra8Unorm,
+            wgt::TextureFormat::Rgba16Float,
+        ];
+        let mapped_formats: Vec<_> = formats
+            .iter()
+            .map(|format| map_texture_format(*format))
+            .collect();
+        // Preferred canvas format will only be either "rgba8unorm" or "bgra8unorm".
+        // https://www.w3.org/TR/webgpu/#dom-gpu-getpreferredcanvasformat
+        let preferred_format = self.0.get_preferred_canvas_format();
+        if let Some(index) = mapped_formats
+            .iter()
+            .position(|format| *format == preferred_format)
+        {
+            formats.swap(0, index);
+        }
+
         wgt::SurfaceCapabilities {
             // https://gpuweb.github.io/gpuweb/#supported-context-formats
-            formats: vec![
-                wgt::TextureFormat::Bgra8Unorm,
-                wgt::TextureFormat::Rgba8Unorm,
-                wgt::TextureFormat::Rgba16Float,
-            ],
+            formats,
             // Doesn't really have meaning on the web.
             present_modes: vec![wgt::PresentMode::Fifo],
             alpha_modes: vec![wgt::CompositeAlphaMode::Opaque],