Make the Web Brighter with the CSS Paint API
summary
CSS Paint API shows concrete hacks not promises: paint worklets run off the main thread with a 2D canvas context and paint worklet registration, responsive images redraw on element resize, and Chrome 65 already implements it. Examples draw circles, stars and material-like backgrounds, render a working QR code generated via a sync module import, build pie/donut and bar charts (G3 import suggested), try WebAssembly import unfinished, and animate via requestAnimationFrame or typed custom properties.
AI-written summary · about
chapters (20)
- 0:00Start
- 2:35CSS Engine Internals
- 3:37Polyfill with JS
- 6:35Use in CSS
- 7:55CSS Fallback
- 9:19Declare a custom paint class
- 10:05Register paint
- 10:36Load worklet
- 11:29Paint Hello World
- 14:01CSS Paint + variables
- 16:19CSS Paint + arguments
- 17:21CSS Paint + alpha
- 17:50chrome://flags/#enable-experimental-web-platform-features
- 19:53Material Background
- 21:35QR Code
- 22:50Circle Chart
- 28:10Custom Properties Level 2
- 29:05BAR CHART ANIMATION
- 30:39Resources
- 31:16Demos
