What’s New in Chrome 94

Highlights

• The default colour space in the spec is stated as SRGB for the elements of <canvas> and can be changed to Display P3.
• WebCodecs is a new, low-level manner of access to audio and video codecs that are vital for streaming games, video editors and other applications.
• WebGPU begins its original test.
• The PWA Summit will take place from 6 to 7 October.
• And there’s much more.

Default color space for canvas elements

The display colour is crucial for some people. The colours on the screen must match what is printed for the photographers, printed illustrators and many others. Starting with Chrome 94, <canvas> elements are managed in full colour by sRGB. Previously, but not specifically stated in the spec, sRGB was convention.

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

More crucially, when establishing a <canvas> context 2d object or an ImageData object, including the P3 colour space, you can select the colour space to utilise.

WebCodecs

It’s easy enough to put video on a page. But, if you need to work with the components of a video stream, it’s difficult and usually needs you to use Web Assembly to create your own codecs!

But delivering your own codec entails creating browser code, and hardware acceleration can’t be taken advantage of! The Web Codecs API allows you to use the media and codecs currently in the browser.

I’ve always struggled personally to remember the necessary command line commands to encode a web video or to convert a GIF to a video file. With the APIs accessible through WebCodecs, I can rapidly construct a web application that reads a file and outputs the correct files for the web.

Web tools, such as video editors, video conferencing, streaming apps, that demand full control over the way media content is processed. Access to browsers integrated inside media controls is enormous.

It’s difficult to display anything helpful in 30 seconds, but check out WebCodecs video on web.dev for a deep dive with tonnes of code and a few of amazing demos!

WebGPU

WebGPU is a new API which presents contemporary features for graphics, including Direct3D 12, Metal and vulkan. You can think of this as WebGL, but it allows access to more powerful GPU functions and supports the performance of typical GPU calculations.

It starts an original test in Chrome 94, and Safari and Firefox are working on their implementations.

François has a wonderful essay about accessing the WebGPU’s advanced GPU features on web.dev and comparing the matrix multiplication performance with the GPU. This is a hint. Here is a hint. The GPU is the winner.

PWA Summit

The PWA Summit will take place from 6 to 7 October. This is a free online conference to help everyone thrive with progressive web applications. The PWA Summit is a partnership among a handful of firms active in the development of PWA technologies: Google, Intel, Microsoft and Samsung.

There are a lot of great conversations and content. More information and registration can be found on PWASummit.org.

And more! And more!

There’s lots more, of course.

The priority scheduler.postTask() method enables you to programme tasks and dynamically adjust or cancel all their priorities.

When scroll bars emerge, if you have ever fought with re-layout, the scrollbar-gutter attribute will make you pleased. It controls the presence of scrollbar gutters, so that alterations in the layout can be prevented when content is expanded.

WebSQL is now deprecated for use in third-party contexts, and removal in Chrome 97 is anticipated. In November 2010, the Web SQL database standard was abandoned. It was never implemented in Firefox and in Safari in 2019 was deprecated. When use is low enough, it will be deprecated and removed from Chrome. If you still use WebSQL, it would be a good time to start planning your migration.

And the virtual keyboard API lets you control how and when the virtual on-screen keyboard is displayed. You can directly manage any scrolling behaviour or layout changes when the keyboard appears or disappears.