HTML Canvas - globalCompositeOperation Property

The HTML Canvas globalCompositeOperation property of the Canvas 2D API is used to set the composite operation to apply when drawing shapes onto the Canvas element.

It belongs to the CanvasRenderingContext2D interface and the composite operation can be only set to the 2D shapes drawn onto the Canvas.

Possible input values

Following are the list of predefined constants you can set/assign as values to this property −

S. No	Value & Description
1	source-over It is used to draw one shape on the other content available on the Canvas element.
2	source-in It is used to insert overlapping graphics on the canvas.
3	source-out The graphics are only rendered when they are not overlaped. Remaining part is made transparent.
4	source-atop The new shape is overlapped with the Canvas context.
5	destination-over New shapes are generally rendered behind the existing content.
6	destination-in The existing content is made transparent when the new shapes are not overlapped.
7	destination-out When there is no overlap between the shapes, the existing content is kept.
8	destination-atop The existing content is only kept when overlapped with the new shape. The new shape is drawn behind the content.
9	lighter The color is determined at the area where shapes overlap.
10	copy Only the particular shape is shown.
11	xor The area where shapes overlap is made transparent.
12	multiply pixels are multiplied based on top layer and bottom layer. The picture becomes darker.
13	screen Pixels are inverter, multiplied and later inverted again. The picture lightens as the result.
14	overlay It forms a result which uses both the values 'multiply' and 'screen'.
15	darken This value retains the darkest pixels of the available layers when called.
16	lighten This value lighten the darkest pixels of the available layers when called.
17	color-dodge It divides the bottom layer by the inverted top layer.
18	color-burn It divides the inverted bottom layer by the top layer, and then inverts everything before displaying.
19	hard-light It is a combination of multiply and screen, but the top and bottom layers are swapped.
20	soft-light This values returns a softer version of hard-light when called.
21	difference subtracts the colors code such that the difference is positive and returns it by changing the color codes.
22	exclusion It is similar to the difference, but the contrast is reduced.
23	hue hue is applied to the top layer content in the Canvas element.
24	saturation saturation (chroma) is applied to the top layer inside the Canvas element.
25	color The color of the shapes is changed by applying hue and saturation effects.
26	luminosity luminosity is varied for the top layer inside the Canvas element when this property value is given.

Example

The following example demonstrates 'source-out' value to two striped rectangles using the HTML Canvas globalCompositeOperation property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'source-out';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

HTML Canvas GlobalCompositeOperation Property

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'destination-over'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'destination-over';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'destination-atop'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'destination-atop';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'lighter'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'lighter';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'xor'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'xor';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'multiply'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'multiply';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'screen'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'screen';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'difference'. It returns the same colors at the area of coincidence.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'difference';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'hue'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'hue';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

Example

The following example uses the Canvas element context object to apply the property globalCompositeOperation using the value 'luminosity'.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = 'luminosity';
      context.fillStyle = 'blue';
      context.fillRect(25, 25, 200, 200);
      context.fill();
      context.fillStyle = 'purple';
      context.fillRect(175, 25, 150, 200);
      context.fill();
   </script>
</body>
</html>

Output

The rectangles before applying the property is −

The output returned by the above code on the webpage as −

html_canvas_colors_and_styles.htm