CanvasRenderingContext2D.globalCompositeOperation

The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the compositing or blending mode operations to use.

See also the chapter Compositing in the Canvas Tutorial.

Syntax

ctx.globalCompositeOperation = type;

Types

Examples

Using the globalCompositeOperation property

This is just a simple code snippet using the globalCompositeOperation property to draw two rectangles that exclude themselves where they overlap.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'xor';

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

Edit the code below and see your changes update live in the canvas:

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.globalCompositeOperation' in that specification.
Living Standard  
Compositing and Blending Level 1 Candidate Recommendation  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes ?

  • In WebKit- and Blink-based Browsers, a non-standard and deprecated method ctx.setCompositeOperation() is implemented besides this property.
  • Support for "plus-darker" and "darker" were removed in Chrome 48. Developers looking a replacement should use "darken".

Gecko-specific notes

  • An early Canvas specification draft specified the value "darker". However, Firefox removed support for "darker" in version 4 (bug 571532). See also this blog post that suggests to use the difference value to achieve a similar affect to "darker".

See also

Document Tags and Contributors

 Contributors to this page: fscholz, nmve, arronei, ramazanpolat, erikadoyle, jpmedley
 Last updated by: fscholz,