diff --git a/wgpu/src/backend/web.rs b/wgpu/src/backend/web.rs
index cfde1f5d35..cfdfe1ddcf 100644
--- a/wgpu/src/backend/web.rs
+++ b/wgpu/src/backend/web.rs
@@ -1113,21 +1113,26 @@ impl crate::context::Context for Context {
         _adapter: &Self::AdapterId,
         _adapter_data: &Self::AdapterData,
     ) -> wgt::SurfaceCapabilities {
-        let format = self.0.get_preferred_canvas_format();
-        let (preferred, second) = if map_texture_format(wgt::TextureFormat::Bgra8Unorm) == format {
-            (
-                wgt::TextureFormat::Bgra8Unorm,
-                wgt::TextureFormat::Rgba8Unorm,
-            )
-        } else {
-            (
-                wgt::TextureFormat::Rgba8Unorm,
-                wgt::TextureFormat::Bgra8Unorm,
-            )
-        };
+        let preferred_format = self.0.get_preferred_canvas_format();
+        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();
+        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![preferred, second, wgt::TextureFormat::Rgba16Float],
+            formats,
             // Doesn't really have meaning on the web.
             present_modes: vec![wgt::PresentMode::Fifo],
             alpha_modes: vec![wgt::CompositeAlphaMode::Opaque],