Member-only story
Exploring the New CSS Houdini Painting API
Low-level APIs that hook into the styling and layout process of your browser’s rendering engine
Note: The source code for the demo discussed in the second half of this article can be found on GitLab.
Intro
As I mentioned in my recent article about canvas animation inside React components, I love HTML canvas. So I couldn’t be more excited to learn about the new CSS Houdini APIs when I was reading a short article about it on css-tricks.com, by Stephen Fulghum.
The main reason for my excitement is that the Painting API makes it possible to create custom CSS images by drawing onto a PaintRenderingContext2D (which is pretty much an exact copy of the 2D context that we draw onto when we use the regular Canvas API — except for a small subset of features).
By using the Painting API we can programmatically draw images and use those images in our CSS. When drawing, we can receive parameters with information coming from the DOM and applied stylesheets.
The MDN Web Docs describe it like this:
Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine.
I find it very exciting, especially since we see signs that all major browsers are implementing this:
We will have a look at the CSS Painting API (and Worklets) in this article.
Important note: CSS Houdini is still an experimental technology, in general. But as mentioned before, most browsers are implementing it or are strongly considering implementing it. Google Chrome is an early adaptor and ships support for the Painting API since version 65, so that’s the browser we will be using today.
