New in Chrome 94

Pete LePage

Here's what you need to know:

The default color space for <canvas> elements is now formally defined in the spec as SRGB, and you can change it to Display P3.
WebCodecs is a new, low level way to access built in audio and video codecs, important for streaming games, video editors, and such.
WebGPU starts its origin trial.
The PWA Summit is coming up October 6-7.
And there's plenty more.

I'm Pete LePage, working, and shooting from home, let's dive in and see what's new for developers in Chrome 94.

Default color space for `canvas` elements

How color is rendered on screen is critical to some users. For photographers, print illustrators, and many others, the colors on screen need to match what's printed. Starting in Chrome 94, <canvas> elements are fully color managed using sRGB. Previously, sRGB was convention, but not explicitly defined in the spec.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

More importantly, you can now specify which color space to use when creating a <canvas> rendering context 2d object, or an ImageData object, including the P3 color space.

WebCodecs

Putting video on a page is easy enough. But, if you need to do something a little more complex, and interact with the components of a video stream, it's hard, and typically requires you to use Web Assembly to ship your own codecs!

But shipping your own codec means writing code the browser already has, and it can't take advantage of hardware acceleration! The Web Codecs API makes it possible to use the media components and codecs that are already in the browser.

Personally, I've always struggled to remember the correct command line switches to encode a video for the web, or to convert a GIF to a video file. Using the APIs available via WebCodecs, I could quickly build a web app that reads a file and exports the correct files needed for the web.

The path from a Canvas or an ImageBitmap to the network or to storage — The path from a `Canvas` or an `ImageBitmap` to the network or to storage

Web apps that require full control over the way media content is processed, like video editors, video conferencing, streaming apps, and so on. Access to the browsers built in media controls is huge.

Showing anything useful in thirty seconds is hard, so check out Video processing with WebCodecs on web.dev for a deep dive with lots of code and a few cool demos!

WebGPU

WebGPU is a new API that exposes modern graphics capabilities, specifically Direct3D 12, Metal, and Vulkan. You can think of it like WebGL, but it provides access to more advanced features of the GPU, and it also provides support for performing general computations on the GPU.

It's starting an origin trial in Chrome 94, and both Safari and Firefox are currently working on their implementations.

A Babylon.js demo of a rough sea being simulated using WebGPU's compute shader capability.

François has a great article, Access modern GPU features with WebGPU on web.dev with the details, and compares the performance of matrix multiplication running on the CPU versus the GPU. Here's a hint. The GPU wins.

PWA Summit

The PWA Summit is coming up October 6-7. It's a a free, online conference focused on helping everyone succeed with Progressive Web Apps. The PWA Summit is a collaboration between folks from a handful of different companies involved in the creation of PWA technologies: Google, Intel, Microsoft, and Samsung.

There are a ton of great talks and content. You can learn more and register at PWASummit.org. I hope to see you there!

And more!

Of course there's plenty more.

The prioritized scheduler.postTask() method allows you to schedule tasks, and dynamically change their priorities, or cancel them all together.

If you've ever fought with a re-layout when scroll bars appear, the scrollbar-gutter property will make you happy. It provides control over the presence of scrollbar gutters, allowing you to prevent layout changes as content expands.

The use of WebSQL in third-party contexts is now deprecated, and removal is expected in Chrome 97. Web SQL Database standard was abandoned in November 2010. It was never implemented in Firefox, and was deprecated in Safari in 2019. It will be deprecated and removed from Chrome when usage is low enough. If you're still using WebSQL, now would be a good time to start planning your migration off of it.

And the virtual keyboard API gives you more control over how and when the virtual, on-screen keyboard is shown. It allows you to explicitly control any scrolling behaviour, or changes to layout when the keyboard appears or disappears.

New in Chrome 94

Default color space for canvas elements

WebCodecs

WebGPU

PWA Summit

And more!

Further reading

Subscribe

Default color space for `canvas` elements