houdini-toolkit / houdini-toolkit

Convenient set of useful tools for working with the CSS Houdini APIs

houdini-toolkit - convenient set of useful tools for working with the CSS Houdini APIs

Paint API examples • Examples

About

Set of tools for working with the CSS Houdini APIs, simplifying the coding process. All tools are based on the documentation on this topic.

Example

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):

TypeScript

/* 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);

Javascript

/* 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();
    }
  }
});

HTML

<script>
  CSS.paintWorklet.addModule("checkboardWorklet.js");
</script>

CSS

li {
  background-image: paint(checkerboard);
}

The example is based on the code from this section of the documentation.

Table of contents

1. Installation
2. Compability
3. Documentation:
   • createPaint
   • isPaintSupported
4. Inspiration
5. License

Installation

The installation process occurs by entering the following command in the terminal:

npm i houdini-toolkit

Access to npm occurs by installing Node.js.

Compability

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.

Documentation

This section will describe all the functionality of houdini-toolkit. It may be supplemented when new versions are released.

createPaint

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.

Arguments

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.

Example:

JavaScript

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 }
});

TypeScript

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

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.

Example

import { isPaintSupported } from "houdini-toolkit";

if (isPaintSupported) {
  CSS.paintWorklet.addModule("checkboardWorklet.js");
}

Inspiration

If you like the toolkit, it will be very cool if you rate the repository with a star ★

License

Licensed under MIT