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.

#javascript