 Hi, I'm Aaron from the canvas team. I'd like to talk to you about the canvas 2d API the friendly graphics API That's been there all along. It's beauty. It's 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 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 canvas 2d 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 Finally one day Rhonda's good old friend canvas 2d Showed her what they'd been working on a lightweight round wrecked 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 bow and said it's always been you canvas 2d 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 canvas 2d has been working on improving themselves and now might be worth another look canvas 2d 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, not the chrome t-rex wasn't even around then either It's supported in Firefox Chrome Safari opera edge Conqueror Vivaldi brave sea monkey doble Falcon electrode charmander and cadaver and Of course the astute among you will mark when I stopped naming obscure web browsers and started naming Pokemon Canvas 2d is available on devices from car consoles to refrigerators to play stations. It's even available in space really Space X's dragon capsules interface is rendered using chromium and JavaScript The point is it's everywhere It's everywhere 35% of web pages have a canvas element and 98% of canvas elements use the canvas 2d rendering context If you're already using canvas 2d I'm excited to show you new features that my team has been working on if not I want to open your eyes to the beautiful world of canvas 2d 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 if in browser medical imaging or the simple fund 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 second thing people say is it's so hard We understand certain things have been hard to do in canvas 2d, 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 its performant. Also, it's getting more performant if you're thinking of performance. Remember Yes, we can this 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 canvas 2d API These features are currently live in chrome and can be used by enabling the Experimental canvas 2d API features flag in chrome flags 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 who doesn't love kerning font stretch text decoration underlined position and Finally text rendering. That's a whole lot of textually explicit content Perspective transforms canvas 2d is of course 2d. It's right there in the name But what if I told you canvas 2d could be 3d? introducing canvas 2.5d, but it's actually just canvas 2d But we have added non-affine transforms, which is a fancy way of saying we support the four by four matrices That CSS has for a long time Of course, I've already mentioned the famous the groundbreaking the world changing rounded rectangles They're used all over the place and used to be surprisingly difficult to draw Was once serious path jiu-jitsu is now just a single draw call Part two ergonomics canvas loves you We want canvas 2d 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. 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 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 canvas 2d 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 as developers performance has been holding us back from using canvas for specific use cases But with the new API, I'm here to tell you. Yes. We can bus We'll read frequently is an 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 effects The new API gives developers a way of explicitly marking a canvas for readback 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 But with a 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 y'all 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. It's the API next door. That's been there all along Thanks