web: use get_preferred_canvas_format() to fill SurfaceCapabilities (#3744)

* web: use `get_preferred_canvas_format()` to fill `formats` of `SurfaceCapabilities`

* Only keep preferred format as the first element

* Update CHANGELOG

* Find preferred format and move it to the first position in the formats.

* Add a note to preferred_format.

* Remove the unnecessary allocation.

Author: jinleili

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,22 @@ 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 mut mapped_formats = formats.iter().map(|format| map_texture_format(*format));
+        // 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.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],