I’ve recently become aware of the CSS Paint API and am excited to start using it. I can see this having potential uses in keeping payload sizes down on sites, I’m also excited to experiment and find out just what it can do in terms of large, non-repeating patterns for which perhaps traditional images wouldn’t be feasible.

Great example of the Paint API

Of the top of my head, images of most kinds of noise don’t compress particularly well, however they’re pretty trivial to generate – and the code to do so is tiny. With that in mind I might do a Paint API implementation of simplex noise or Perlin noise.

I’m also curious to see how hard the canvas aspect of this can be pushed and what we can do with this API which a traditional canvas perhaps can’t.

Whist the API isn’t supported in all major browsers just yet, there is a polyfill that brings the Paint API to Edge, Firefox and Safari.

Leave a Reply