 Hello, everyone. My name is Yi. I'm here to talk about new features in Canvas, off-screen Canvas. To understand off-screen Canvas, let me first talk about Canvas. Canvas is a popular way of drawing all kinds of graphics on the screen, and it's an entry point to the world of WebGL. WebGL allows you, the web developers, to run their interactive 2D and 3D graphics on Chrome without using any plug-ins. However, all Canvas logic, rendering computations, user interactions, and much more are all happening in the main thread. When the main thread is busy with critical computations, the Canvas becomes very junky and slow to use. It is a big drawback for Canvas. How can we improve performance? Fortunately, off-screen Canvas is a solution. As the name may suggest, it allows users to run tasks in the background. That is, it can be detached from DOM and move Canvas logic and computations to a web worker. Web worker is a web version of thread. So in other words, we moved all those Canvas computations to a different thread. And Canvas like this, Canvas logics and computations can be done in parallel with computations on the main thread. And by moving these computations away, main thread will have more room for rendering logic and other things. One way to create off-screen Canvas is by calling transfer control to off-screen. It mirrors the regular Canvas to off-screen Canvas. So what happened in the off-screen Canvas will be rendered automatically to the source Canvas the one that is shown on screen. I want to highlight that Image-Bitmap rendering context is also available for off-screen Canvas. It can be accessed via off-screen Canvas.getConductBitmapRender, as shown in this slide. We can then load Bitmap to the context by calling transfer from Image-Bitmap. Image-Bitmap can be from Indian source, including other Canvas or even other off-screen Canvas. The advantage is that the Image-Bitmap is just a texture, and it can be drawn without any undue latency. Without further ado, here is an example of performance differences between Canvas and off-screen Canvas. In both cases, the main thread is very busy. On the left, with the busy main thread, it doesn't have time to do any computations for the Canvas. The animation is very janking and slow. On the right, since the computation for Canvas are sent to different thread, the busy main thread doesn't affect Canvas performance at all. The animation is very smooth. Coding off-screen Canvas is very easy. You can simply create a worker.js file. Then you can create this worker in your JavaScript and start to use it. Here, I'm showing an example of implementation of such a worker. As it is a new feature, you may wonder if it is safe to use. In fact, we're using off-screen Canvas in production today. Before this talk, I looked into Chrome Future Stats to get some exact data on the usage. It is used in almost 23% of all pages loaded by Chrome across all channels and platforms. 80% of Chrome users interact with a page that contains off-screen Canvas daily. I think most of you who are listening to my talk have used it today already. It is the top 200 CSS properties among the 3,000 properties available. And I hope it will get even more popular after today's talk. Moving Canvas computations to a different thread is not the only advantage of off-screen Canvas, even when it's running on the main thread. It's still faster than Canvas. We have run a micro benchmark on creating Canvas, then get its context. Performing these operations on off-screen Canvas is 50% faster than performing them on a Canvas. I'm showing one particular run of many runs we have done. It has a particular advantage on text-related operations. It is consistently 15% to 45% faster. Speaking of text, it leads to our next topic, what's new in text metrics. We added actual bending box measurements in major text functions. The actual bending box measurements, it measures the smallest rect that can bend the text. It ignores the space at the beginning and at the end. In this example in the slide, I'm measuring space, space, ABC, space, space. The only measurement we support before in major text is width, which includes a length of space. And the actual bending box will only contain the size of ABC. In fact, actual bending box left will be a negative value due to the indentation. I will also take this opportunity to share with you what we are working on right now. Badge draw image. This is when multiple image can be drawn within a single API card. Recording pictures. This is when you can create a record object that receives all the commands from a Canvas 2D and can be replayed multiple times. With these two filters, we're hoping to get some good performance improvement in Canvas. There are few new primitives, such as run rect and over primitives. We will also improve our support to text and color. Thank you very much for listening to my talk. Of course, I did not code everything I presented today. Not even half. It's a joint effort with all my teammates. They are here on this slide. I want to give a special thanks to Fernando or Tech Lead for this project.