CSS Paint API
The first API from CSS Houdini to see the light of day, with an actual browser implementation, is the Paint API, which first appeared in Chrome 65 and is now available in Opera with the intent for Firefox, Safari, and Edge to implement it as well.
The Paint API gives us a way to control a 2D rendering context that we can programmatically draw to using JavaScript. This is a lot like the Canvas element we learned about in Chapter 7, Media – Audio, Video, and Canvas.
There are a couple of significant differences between the Paint API and the 2D rendering context of the Canvas:
- The main difference is that the Paint API allows us to use the 2D image with any CSS property that accepts an image as a value. For example, we can create a 2D image and then use it as the value for a
background-image,border-image, ormask-image. - The Paint API also makes use of a worklet, which is a bit like a worker, that is, a thread running parallel to the main browser...
