Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Started with Houdini's Paint Worklet

Getting Started with Houdini's Paint Worklet

Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM). In this slides we're focusing on Houdini's Paint Worklet/CSS Paint API

adriantirusli

January 28, 2021
Tweet

More Decks by adriantirusli

Other Decks in Programming

Transcript

  1. Hi, my name is Adrianti Rusli Frontend Engineer at JYSK

    Group Singapore @adriantirusli ehem.dev
  2. —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
  3. 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
  4. 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
  5. 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.
  6. index.html <!doctype html> <style> textarea { background-image: paint(checkerboard); } </style>

    <textarea></textarea> <script> CSS.paintWorklet.addModule('checkerboard.js'); </script>
  7. Usage in CSS <!-- index.html --> <!doctype html> <style> textarea

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

    background-image: paint(checkerboard); } </style> <textarea></textarea> <script> CSS.paintWorklet.addModule('worklet.js'); </script>
  9. worklet.js class MyPainter { paint(ctx, size, properties) { // ...

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

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

    properties) { // ... } } registerPaint('myPainter', MyPainter);
  12. CREDITS: This presentation template was created by Slidesgo, including icons

    by Flaticon, and infographics & images by Freepik. Any Question?