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 define advanced CSS cutom properties with syntax (type checking), default values, and inheritance. 02 Paint Worklet Enables developers to define 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 , 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 textarea { background-image: paint(checkerboard); } CSS.paintWorklet.addModule('checkerboard.js'); 

Usage in CSS textarea { background-image: paint(myPainter); } CSS.paintWorklet.addModule('checkerboard.js'); 

Initialize Worklet textarea { background-image: paint(checkerboard); } CSS.paintWorklet.addModule('worklet.js'); 

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-polyfill 

Demo! 

No content

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