HTML5 Canvas Global Composite Operations TutorialPublished on January 27th 2011 by Eric Rowell
To perform a composite operation with HTML5 Canvas, we can use the globalCompositeOperation property of the canvas context. This property defines the composite operation between the source and destination states of the canvas. destination is defined as the canvas state preceding a composite operation. source is defined as the canvas state following a composite operation.
We can perform one of twelve composite operations including source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, xor, and copy. Unless otherwise specified, the default composite operation is source-over.
HCT Pro Tip
It's important to note that a canvas context can only support one composite operation throughout its life cycle. if we want to use multiple composite operations, as this tutorial does, we need to apply the operations on a hidden canvas and then copy the results onto a visible canvas.