In this recipe, we'll explore composite operations by creating a table of each variation. Composite operations are particularly useful for creating complex shapes, drawing shapes underneath other shapes instead of on top of them, and creating other interesting effects.
The following is a description for each possible composite operation available with the HTML5 canvas API, where the red circle represents the source (S) and the blue square represents the destination (D). To further develop your understanding of composite operations, it helps to look at the corresponding operation while reading each description:
Operation |
Description |
---|---|
Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere. | |
Display the source image wherever both the source image and destination... |