First Houdini Code for Paint API
Let us write and tryout our first Houdini code.

To do this we will require a minimum of 2 files.

First, a javascript file (firstpaint.js) in which will save our the paintWorklet that will fill the background of our element half with yellow and half with cyan color, and

Second, a html file (firstcode.htm) which will be our web page. In this we shall define a div element and set its background image style to a paint function.

firstpaint.js

Prepare a javascript file with the paintWorklet (firstpaint.js). It contains a class (boxFill) with the paint method and a registerPaint function to register this class to the paint function to be used as a CSS property value.


For the sake of simplicity we shall use the lesser files. Once you start using this in then project mode then your content may spread across multiple CSS and javascript files.
 

firstcode.htm

Let us prepare our html file (firstcode.htm)...


The code of interest in this file has been highlighted in red.

Behold!

Upload the code to a web-server and see the result. The web-server could be on your own computer of somewhere on the internet or intranet, and see the result.



Click Here to view the web-page separately.