Canvas2D is getting an update

(upbeat music) - Hi, I’m Aaron from the Canvas Team. I’d like to talk to you about the Canvas2D API, the friendly graphics API that’s been there all along, its beauty, its brilliance, and all the incredible stuff we’ve been working on, from an extremely unbiased point of view. First, let’s start off with a love story. Rhonda was a rectangle, a rounded rectangle. She loved being a rounded rectangle. It excited her to deliver messages. She adored being a button. One day she even got to be a guitar pick-shaped profile photo for a music startup. Rhonda was too busy to think about love. She enjoyed doing so many things together with her current implementation, CSS.

00:49 - However, sometimes CSS just wasn’t the right partner for the things Rhonda wanted to do. She longed for the romance of JavaScript, to respond to user interactions, to dance around the page, light as a feather. Her good old friend Canvas2D was always around, but sometimes she felt like they didn’t quite understand one another. Then, one day she met Webgl. They hit it off. She became a real 3D mesh. Camera, lighting, shaders. But it was all so much work. Even the simplest things became Herculean efforts that required coordination, and lots and lots of code. And now she couldn’t even run on certain devices.

01:34 - Finally, one day, Rhonda’s good old friend, Canvas2D, showed her what they’d been working on, a lightweight roundRect implementation. Now Rhonda could fly about the page, spinning, twirling, scaling, and changing looks with just a single line of code. Her new implementation was so beautiful, so simple, so lightweight and fun. She nestled up to her new beau and said, “It’s always been you, Canvas2D.” Thank you all for indulging me in that romantic comedy about a shape. For some reason, my script writing career never took off. What’s important is that your good old friend, Canvas2D, has been working on improving themselves and now might be worth another look. Canvas2D has been around since… since forever. Well, forever in internet years. The oldest spec I could find was from 2005, so the Chrome T-Rex roamed the Earth. Well, the Chrome T-Rex wasn’t even around then either. It’s supported in Firefox, Chrome, Safari, Opera, Edge, Conquer, Vivaldi, Brave, Sea Monkey, Dubal, Falcon, Electrode, Charmander, and Cadabra.

02:48 - And, of course, the astute among you will mark when I stopped naming obscure web browsers, and started naming Pokemon. Canvas2D is available on devices from car consoles, to refrigerators, to PlayStations. It’s even available… in Space. Really, SpaceX’s Dragon capsule’s interface is rendered using Chromium and JavaScript. The point is, it’s everywhere. It’s everywhere! 35% of webpages have a Canvas element, and 98% of Canvas elements use the Canvas2D rendering context. If you’re already using Canvas2D, I’m excited to show you new features that my team has been working on.

03:30 - If not, I want to open your eyes to the beautiful world of Canvas2D because it’s just the best and easiest way to do certain things in a browser. How else would you get the expression of drawing apps, the power of cells and equations in Google Sheets, the key visualization of Bloomberg Terminals, or of in-browser medical imaging, or the simple fun of browser games? Alas, there’s still some developers who don’t use Canvas. Why? So here’s some reasons we hear. SVG and CSS and the DOM can do everything Canvas can do and more, which is fair. But sometimes don’t you want a programmatic interface, with all the power that that brings? Also, we’re focusing on the “and more” part and bringing to Canvas some of the more popular features of these other technologies. We’re showing Canvas some love.

04:23 - Second thing people say is, “It’s so hard.” We understand, certain things have been hard to do in Canvas2D, but it’s getting easier. We’ve listened to developers, and we know that ergonomics is important. Canvas loves you. Finally, people say, “We can’t use Canvas for our web app, we need performance.” Well, to them I say, Canvas is performant. Also, it’s getting more performant. If you’re thinking of performance, remember, yes, we Can-vas. Anyhow, none of these reasons are good. Use Canvas everywhere. Well, not everywhere. We don’t want to propose Canvas as a replacement for the DOM, just as a good alternative when you want lower-level graphical control. But you should use it in more places than you’re used to because Canvas is getting better. We’re addressing the concerns I outlined and implementing new features for the Canvas2D API. These features are currently live in Chrome and can be used by enabling the experimental Canvas2D API features flag in Chrome flags.

05:26 - And they’re coming to other browsers soon. So part one, showing Canvas some love. We’re working on catching up to CSS. We’ve been paying attention to the most common requests from developers for missing features, and have added a few here, which I will now describe. The first is conic gradient, you’ve seen linear gradients, you’ve seen radial gradients, how about a nice conic gradient? Your color pickers need not be static images no longer. The most common feature request we get by far is to improve text rendering in Canvas, and we’re working on it. With a new API, we’ve added a bunch of new attributes to Canvas text, like text letter spacing, text word spacing, font variants, for all the typographical geeks out there, kerning.

06:16 - Who doesn’t love kerning? Font stretch, text decoration, underline position, and finally, text rendering. That’s a whole lot of textually explicit content. Perspective transforms. Canvas2D is, of course, 2D. It’s right there in the name. But what if I told you Canvas 2D could be 3D? Introducing Canvas2.5D, but it’s actually just Canvas2D. But we have added non-affine transforms, which is a fancy way of saying, we support the 4x4 matrices that CSS has for a long time. Of course, I’ve already mentioned the famous, the groundbreaking, the world changing, rounded rectangles.

07:05 - They’re used all over the place and used to be surprisingly difficult to draw. What was once serious path jujitsu is now just a single draw call. Part two, ergonomics. Canvas loves you. We want Canvas2D to be as easy for developers to use as possible. Though it’s great already, there are a couple of areas where we collected the most common usage patterns and tried to add simple, built-in functionality. Without further ado, I present to you what was once the canonical way to clear a Canvas, and we’ve been living with this, it makes no sense.

07:45 - I feel like I need to personally apologize. But happily, the new API has a reset function that clears the canvas, resets the path, resets the transform and the transform stack with just a single call. Array Color Input. Setting color values with strings makes sense in CSS, but animating them in Canvas is a pain. Now, you can pass just an array of numbers for color and tweak, fade or interpolate them to your heart’s content. We also plan to support color spaces with this feature, though that’s still in the works.

08:19 - SVG filters are an amazing, extensible, beautiful piece of web graphics that maybe you didn’t even know existed. These filters are already implemented in Canvas2D, and unfortunately, the interface is difficult to use. It’s XML strings, and it doesn’t work on web workers. But with the new API, there’s a programmatic object-oriented interface for filters. Now, you can finally use them with ease. Last part is performance. There’s always room for improvement with performance.

08:51 - As developers, performance has been holding us back from using Canvas for the specific use cases. But with the new API, I’m here to tell you, yes, we Can-vas. Will Read Frequently is in attribute we’ve added for Get Image data, which is how you read pixel data back from the Canvas. It can be very slow, but it’s really useful for generative affects. The new API gives developers a way of explicitly marking a Canvas for feedback.

09:18 - This allows us to optimize things under the hood and keep Canvas fast for a larger variety of use cases. It’s been around in Firefox for a while already, but we’re finally making it part of the official spec. We all hate a sad tab, such a sad tab. Let’s make sad tabs happy again. On lower spec devices with a million apps open, it’s been possible to run out of GPU memory or run into some other kind of Dragon and get your context “lost.” Unfortunately, until now, there’s been no elegant way to deal with this, once the user refocuses on your page.

09:54 - But with the new API, a Canvas can notify the DOM when something has gone wrong and reinitialize the context automatically. So that’s it. Those are the nine new features that are added to Canvas. We look forward to seeing what amazing things you’ll do with them. We’re also always excited to receive feedback for even more new features, if you have some great ideas. Whether you’re new to Canvas, you’ve been using it for years, or you’ve been avoiding using it for years, I’m here to tell you to give Canvas another look.

10:25 - It’s the API next door that’s been there all along. Thanks. (upbeat music) .