Red Opacity:

Blue Opacity:

This page presents an interactive demo of the HTML5 Canvas globalCompositeOperation setting. A developer can use this property to produce sophisticated effects that would otherwise be very difficult to attain. However, it can be hard to intuit which composite operation should be used in a particular situation.

The operations are laid out horizontally, with two examples per operation. First, the object is painted with "source-over". Then, the object is painted with the indicated composite operation. Therefore, the object is the destination, and the object is the source.

Some observations that can be made:

• The destination-in and destination-out operations ignore the color of the incoming object. As a result, they allow the alpha of the canvas to be changed without affecting existing color. This allows existing drawing to be clipped.
• The source-in and source-out operations ignore the color that is already deposited on the canvas. This allows existing alpha to clip the object that is currently being drawn.
• The lighter operation produces colors that are more than just a linear blend of the existing and incoming colors.

This page works in Chrome 17 and Firefox 10. It worked in Safari before Safari 5, but does not work as of Safari 5.1.3.