Alpha Paintlet

Dave Rupert created a little lovely Houdini Paint Worklet that allows you set a background color with an alpha on elements. The Worklet’s code is as simple as this:

registerPaint('alpha', class {
  static get inputProperties() {
    return ['--bg-alpha', '--bg-color']
  }

  paint(ctx, size, props) {
    ctx.globalAlpha = props.get('--bg-alpha');
    ctx.fillStyle = props.get('--bg-color');
    ctx.fillRect(0, 0, size.width, size.height);
  }
})

🎩 Houdini, ain't that a magician?

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.

It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started

Using the two custom properties --bg-alpha and --bg-color you can control how it should look (in browsers that support Houdini, i.e. Chromium).

See the Pen
Alpha Paintlet Demo by Dave Rupert (@davatron5000)
on CodePen.

~

In the video below you can see the conversation that builds up to it.

~

🎨 Alpha Paintlet (Blogpost) →
alpha-paintlet Source (GitHub) →