Getting Started with Houdini's Paint Worklet

Getting Started with Houdini’s Paint Worklet @adriantirusli

Hi, my name is Adrianti Rusli Frontend Engineer at JYSK
Group Singapore @adriantirusli ehem.dev

—MDN 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

Typed Object Model Enables the browser to understand CSS and
typed Javascript objects instead of strings, enabling faster parse times and more semantic manipulation. 01 Paint and Values API Enables developers to deﬁne advanced CSS cutom properties with syntax (type checking), default values, and inheritance. 02 Paint Worklet Enables developers to deﬁne canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. 03 Animation Worklet Enables animations to hook into the GPU to avoid jank and not clog the main thread. The Animation Worklet also enables scoll-linked animations. 04

Layout Worklet Gives web developers the ability to write their
own layout algorithms in addition to the native algorithms user agents ship with today. 05 Font Metrics API Designed to provide basic font metrics for both in-document and out-of-document content 06 Parser API Allows developers to access the engine's parser (built on top of the Typed OM) 07

Is Houdini ready yet?

Houdini’s Paint Worklet 1. Also known “CSS Paint API” or
“CSS Custom Paint”. 2. Programmatically generate an image whenever a CSS property expects an image like background-image or border-image. 3. If you know how to draw in a <canvas>, you can draw in a paint worklet! 4. The difference from using a common background image here is that the pattern will be re-drawn on demand.

index.html <!doctype html> <style> textarea { background-image: paint(checkerboard); } </style>
<textarea></textarea> <script> CSS.paintWorklet.addModule('checkerboard.js'); </script>

Usage in CSS  <!doctype html> <style> textarea
{ background-image: paint(myPainter); } </style> <textarea></textarea> <script> CSS.paintWorklet.addModule('checkerboard.js'); </script>

Initialize Worklet  <!doctype html> <style> textarea {
background-image: paint(checkerboard); } </style> <textarea></textarea> <script> CSS.paintWorklet.addModule('worklet.js'); </script>

worklet.js class MyPainter { paint(ctx, size, properties) { // ...
} } registerPaint('myPainter', MyPainter);

Define class and paint method class MyPainter { paint(ctx, size,
properties) { // ... } } registerPaint('myPainter', MyPainter);

Register class and CSS reference class MyPainter { paint(ctx, size,
properties) { // ... } } registerPaint('myPainter', MyPainter);

What about Browser Support?

Checking the CSS object if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('worklet.js');
}

Use @supports in CSS file @supports (background: paint(id)) { /*
... */ }

Overwrite CSS declaration textarea { background-image: linear-gradient(0, red, blue); background-image:
paint(myGradient, red, blue); }

Use CSS Paint Polyfill github.com/GoogleChromeLabs/css-paint-polyﬁll

CREDITS: This presentation template was created by Slidesgo, including icons
by Flaticon, and infographics & images by Freepik. Any Question?

Getting Started with Houdini's Paint Worklet

Getting Started with Houdini's Paint Worklet

adriantirusli

More Decks by adriantirusli

Other Decks in Programming

Featured

Transcript