Interactive deep dive into Porter-Duff compositing operators and CSS/canvas blend modes, with formulas, playgrounds, and real browser rendering mechanics.
Key Takeaways
The 12 Porter-Duff operators (1984, Lucasfilm) derive from 2x2x3x1 permutations of source/backdrop pixel regions; each sets Fs and Fb contribution factors.
Alpha combines opacity AND coverage, explaining smooth anti-aliased edges on fully opaque shapes via source-over compositing.
In the DOM, Porter-Duff control is locked to source-over; canvas exposes globalCompositeOperation for full operator access.
Blend modes are named functions B(Cb, Cs) applied before compositing, only in the overlapping region; separable modes process R, G, B channels independently.
Practical canvas example builds a Pac-Man ghost using destination-out (carve) and destination-over (background) operators.
