10Phase 10 of 12
Painting
The boxes get filled in with pixels: text, colors, borders, shadows.
boxes → drawing commands → pixelspainting…
Animation loop, let it play, or use the controls.
Painting walks the render tree and emits drawing commands, fill this rectangle, stroke this border, render this text run, draw this shadow. The output is a list of paint records the GPU (or CPU rasteriser) can execute.
Painting is split into layers. Some elements get their own layer because they're transformed, opacity-animated, or marked with will-change. Painting one layer doesn't necessarily repaint others, which is why GPU-accelerated animations stay smooth.
Takeaway
Paint is where pixels get colours. Layered painting is what lets the browser update only the parts of the screen that changed.