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:

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.