HTML5 Canvas Global Composite Operations Tutorial

Published 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.

Live Demo and Editor new window

Author Bio

Eric Rowell

Eric Rowell 

Eric Rowell is the creator of KineticJS, the founder of MeteorCharts, the founder and chief editor of, the author of HTML5 Canvas Cookbook, and a senior web developer at LinkedIn. He really likes robots, and dreams of one day building his own Megazord.

Submit an Article

Hi there! Are you looking to promote your website or boost your brand? With nearly one million unique page views per month, HTML5 Canvas Tutorials is a great place to submit HTML5 canvas related articles to help meet your goals.

comments powered by Disqus