Why won't canvas export WebP on iOS Safari?

Test the actual output rather than checking the browser version. Try toDataURL with image/webp on a small canvas, then check whether the result starts with data:image/webp. If it starts with data:image/png, the browser fell back instead of encoding WebP.

For toBlob, check the returned blob's type as well. Handle a null blob or an export error separately, since those aren't the same thing as an unsupported format. Use a nonempty canvas for the test.

If WebP is a requirement, a WebAssembly encoder is a reasonable fallback. A library wrapping libwebp can save you from maintaining your own build, though it adds download size and encoding work on the device. Use native canvas export when the feature test passes and load the fallback when it doesn't.

Do you actually need WebP before upload? You could upload the original and generate a WebP on the server, then cache the result for delivery. That moves the processing off the phone, but it won't reduce the initial upload size.

PNG is the simple fallback if a larger upload is acceptable. Canvas is required to support PNG export, while WebP encoding isn't required. Being able to display a WebP image doesn't necessarily mean the browser can encode one from canvas.

I'd be careful about treating this as true for every iOS version. There's a conflicting report of WebP canvas export working on a recent version, so test the devices and versions you support rather than assuming a permanent platform-wide limitation. The discussion doesn't establish when broader native support might arrive.