The following two infographics demonstrate HTML5 global composite operations. See below for more information.
HTML5 Global Composite Operations
Global composite operations mix two overlapping graphics, based on a specific algorithm
for each operation.
The infographic with the black background represents processing seven global composite operations.
First draw a yellow circle, called the
Second draw an aqua circle, called the
Notice how each operation removes or colors different areas where the circles overlap.
For example, the top left graphic, called
source-atop renders the source yellow circle only
where the yellow circle is on top of the aqua circle.