The Complete CSS Paint API Tutorial

asdasd

Wait. What? This was done with pure CSS?

Well, with pure CSS that was modified via CSS Paint API - which gives access to low(er)-level CSS and makes it easier to deal with CSS properties programmatically.

CSS Paint API is one of those parts of CSS you don't often see in professional web development due to limited browser support (and to limited usefulness, if we're honest). However, CSS Paint API has been implemented in Google Chrome as early as 2018 and you can already start experimenting with it.

The Paint API is part of something called CSS Houdini which is a set of features that give you access to lower-level CSS. Harry Houdini was a Hungarian-born American illusionist and stunt performer, and this is where the name comes from.

How does the Paint API work?

It works is by using Canvas API drawing functions to manipulate the background image on pixel level. Then, that background image is applied to the HTML element.

There is an initialization step. You need to check if client supports it and add your custom JavaScript module for your paint API worklet. But first we need to create our painter class and store it in an external file.

Creating your paint worklet JavaScript module

First let's create our custom painting class and call it Simple (save this file as simple.js but the name can be anything):

/ simple.js: /

class Simple {
    constructor(context, canvas, properties) {
        // clear a 50x50 block with solid black color
        context.rect(0, 0, 50, 50);
        context.fillStyle = '#000000';
        context.fill();
    }
}

Checking for browser support and using paintWorklet

To get started you must check for presence of paintWorklet property in global CSS object. The paintWorklet.js file is what we created in previous step.

if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('paintWorklet.js');
}