Composite operations allow you to change how the new content is drawn on an HTML5 <canvas> element. New things appear over whatever has already been drawn. By changing the global composite operation, you can draw new shapes behind existing ones, perform boolean operations, and do some other neat things.

The two main components in a compositing operation are the destination and the source. The destination is what is already on the canvas, and the source is what is getting drawn onto the canvas.

The following is a description for each possible composite operation available with the HTML5 Canvas API, where the text Be happy represents the source (S), and the green rectangle represents the destination (D). To further develop your understanding of composite operations, it helps to look at the corresponding operation while reading each description: