Description

from spec:

The CSS Paint API is being developed to improve the extensibility of CSS.

Specifically this allows developers to write a paint function which allows us to draw directly into an elements background, border, or content.

from Mozilla:

This specification allows developing prototypes of new graphical CSS features and provides an escape hatch for developers when the existing features aren't good enough for a particular piece of a web page.

Rationale

chromium: implemented
safari ("in development"): https://bugs.webkit.org/show_bug.cgi?id=190217
firefox ("under consideration"): https://bugzilla.mozilla.org/show_bug.cgi?id=1302328

• There's a polyfill (https://github.com/GoogleChromeLabs/css-paint-polyfill)
  but must admit that it hasn't performed so great for me. Sometimes just flat out doesn't respond in Firefox at all. Maybe because it piggy backs on -moz-element() which isn't fully implemented in FF? FYI, have filed some bugs for the polyfill and got responses/fixes from the dev

Including the polyfill sometimes kills the benefits of the paintAPI. One of the big paintAPI wins is complex images in a small size. If you have to include an extra file download (the poylfill) to make it work than the overall file size associated with the worklet becomes larger and you might just be better off using an image. Cross browser support would fix this.

• https://houdini.how/
  Lots of demos. Chrome folks are using paintAPI to polyfill native material UI bits not yet available in CSS

• personally attempting to make a "full" polyfill for the CSS corner-shape spec (which has been stalled for about 10 years at this point) with the paintAPI. Got to a point working on the worklet where I was spending more time trouble shooting bugs with the polyfill than working on the worklet itself. Considering making a v.2 of the worklet just for fully supported browsers. Thinking in the future v.1 (with the polyfil fill) can just be replaced. Work in progress demo: https://jsnkuhn.github.io/corner-shape/

Specification

https://drafts.css-houdini.org/css-paint-api/

Tests

lots and lots of tests:

https://wpt.fyi/results/css/css-paint-api?label=experimental&label=master&aligned&view=subtest