Set of tools for working with the CSS Houdini APIs, simplifying the coding process. All tools are based on the documentation on this topic.
A small example of the module in action (It is worth considering that this example uses import. In order for the code to work, needs to rebuild the file. JavaScript module builders are suitable for this):
/* checkboardWorklet.ts */
import {
DOMString,
PaintFunction,
PaintGeometry,
createPaint
} from "houdini-toolkit";
const paintName: DOMString = "checkerboard";
const paintFunction: PaintFunction = (
ctx: CanvasRenderingContext2D,
geom: PaintGeometry,
properties: StylePropertyMapReadOnly
) => {
const colors = ["red", "green", "blue"];
const size = 32;
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
};
createPaint(paintName, paintFunction);
/* checkboardWorklet.js */
import { createPaint } from "houdini-toolkit";
createPaint("checkerboard", (ctx, geom, properties) => {
const colors = ["red", "green", "blue"];
const size = 32;
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
});
<script>
CSS.paintWorklet.addModule("checkboardWorklet.js");
</script>
li {
background-image: paint(checkerboard);
}
The example is based on the code from this section of the documentation.
The installation process occurs by entering the following command in the terminal:
npm i houdini-toolkit
Access to npm occurs by installing Node.js.
CSS Houdini is a set of APIs that expose parts of the CSS engine. Some or all parts of the API may not be supported in browsers. Let's say the browser compatibility of the CSS Painting API is as follows (at the time of writing the README):
Desktop | Phone | ||||||||||
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
PaintWorkletGlobalScope | ✅ 65+ | ✅ 79+ | ❌ | ✅ 52+ | ❌ | ✅ 65+ | ❌ | ✅ 47+ | ❌ | ✅ 9.0+ | ✅ 65+ |
devicePixelRatio | ✅ 65+ | ✅ 79+ | ❌ | ✅ 52+ | ❌ | ✅ 65+ | ❌ | ✅ 47+ | ❌ | ✅ 9.0+ | ✅ 65+ |
registerPaint | ✅ 65+ | ✅ 79+ | ❌ | ✅ 52+ | ❌ | ✅ 65+ | ❌ | ✅ 47+ | ❌ | ✅ 9.0+ | ✅ 65+ |
The results are based on this table in the documentation.
This section will describe all the functionality of houdini-toolkit. It may be supplemented when new versions are released.
The createPaint() function registers a class to programmatically generate an image where a CSS property expects a file. This function is based on the registerPaint() method of the PaintWorkletGlobalScope interface.
Argument name | Value |
Name | DOMString |
Paint Function | VoidFunction |
Options | Object of values that are found in PaintRenderingContext2DSettings in getters. |
All values must conform to the types described on this site. A module may not contain exact types.
import { createPaint } from "houdini-toolkit";
createPaint("checkerboard", (ctx, geom, properties) => {
const colors = ["red", "green", "blue"];
const size = 32;
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}, {
inputProperties: ['--foo'],
inputArguments: ['<color>'],
contextOptions: { alpha: true }
});
import {
DOMString,
PaintFunction,
PaintGeometry,
ContextOptions,
InputArguments,
InputProperties,
PaintOptions,
createPaint
} from "houdini-toolkit";
const paintName: DOMString = "checkerboard";
const inputProperties: InputProperties = ["--foo"];
const inputArguments: InputArguments = ["<color>"];
const contextOptions: ContextOptions = { alpha: true };
const paintOptions: PaintOptions = {
inputProperties,
inputArguments,
contextOptions
};
const paintFunction: PaintFunction = (
ctx: CanvasRenderingContext2D,
geom: PaintGeometry,
properties: StylePropertyMapReadOnly
) => {
const colors = ["red", "green", "blue"];
const size = 32;
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
};
createPaint(paintName, paintFunction, paintOptions);
isPaintSupported
checks if the Paint API is supported. Let's say the Safari Paint API is not supported in the browser, so the value will be false
.
import { isPaintSupported } from "houdini-toolkit";
if (isPaintSupported) {
CSS.paintWorklet.addModule("checkboardWorklet.js");
}
If you like the toolkit, it will be very cool if you rate the repository with a star ★