Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

2.2.3 HTML5 Canvas Global Composite Operations Tutorial

Description

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.

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.

Demo