Paint API
W3C Standard - CSS Painting API Level 1
New levels of creativity are being doled out on the web-page every day. Designers and developers are using an excessive amount of DOM to achieve fascinating visual effects. Multiple nested <div> tags have become common-place.

The flip-side of this is the load on the browser and its rendering engine. The rendering engine has to maintain in memory many all the DOM nodes and has to perform a recalc for each of these <div>s so that it can render the visuals correctly.

Why the developers did this is another story, but the fact remains that browsers consumed a lot of memory and maintained high-levels of cpu usage to display the content. This also often challenged the responsiveness of the browser, sometimes on slower machines the drag or delay could be felt.

This is where Houdini comes in.

Instead of putting addition DOM to achieve an effect, Houdini provides a hook into the rendering engine and allows the web-developer to run his own code and do his own rendering. It has owned a Pandora's box - effects which were impossible through the existing CSS - DOM model are now so simply within the web-developers reach to be used executed as he/she wants.

The Paint API

The Paint API corresponds to the paint phase of the rendering process. It allows web developers to draw custom images with javascript that responds to style and dimension changes. The API allows you to create a function to draw an image on a canvas-like context and then use this for any CSS property that expects an image, for eg background-image, border-image, list-style-image etc.

The Paint API exposes a restricted version of the Canvas API to do the drawing. Web developers are allowed to use worklets, a paintWorklet to be precise, to define colors, line widths, styles and draw lines, arcs, rectangles and paths.

The Paint API has added paint() function as one of the ways to define the image property in CSS.

.yourcssclass {
    ...
    background-image: paint(box-fill);
    background-image: paint(box-fill-effect, blue);
    ...
}

The work to be done by the paint() function is defined in the worklet module. This worklet module can be added to the document using a javascript

    <script>
        CSS.paintWorklet.addModule('/path/of/javascriptfile');
    </script>

Click here for more information on the paintWorklet()

The strength of Houdini is that the code specified within its framework will render at the same speed as the CSS properties.

Armed with this information, let us write our first Houdini code.
Browser
Support