The Weird — Yet Practical — World of Paint Worklets
summary
Paint worklets are Houdini modules that generate CSS images with the Canvas 2D API and are invoked via paint() background-image syntax; they register tiny classes with a paint(ctx, geom, props) method and worklets are loaded with addModule promises. Examples include tiled circuit-board patterns, randomized “blotto” inkblots and trig-based “flashy” rays, all parameterized through the Properties and Values API so CSS custom properties control radius, color and tile size. Support is partial so provide CSS fallbacks, avoid heavy transpilation, and gate registration on device memory.
AI-written summary · about
chapters (19)
- 0:00Start
- 1:36Worklets
- 2:39Embeddable in Css
- 4:00What Is a Paint Worker Worklet
- 4:43Register Paint
- 5:152d Drawing Context
- 11:19Blotto
- 13:30Trigonometry
- 13:44Flashy
- 14:24Outer Radius
- 15:04Drawing
- 17:01Slapdash
- 19:48Custom Css Properties
- 20:20Custom Properties
- 20:37Properties and Values Api
- 23:33Eat Your Vegetables
- 28:59Be Considerate of Your Users
- 30:04Device Memory Api
- 30:58Resources
