HTML5 Canvas Reference - globalCompositeOperation








The globalCompositeOperation property sets or gets how a new object are drawn onto an existing object.

Browser compatibility

globalCompositeOperation Yes Yes Yes Yes Yes

JavaScript syntax

context.globalCompositeOperation='source-in';

Property Values

Value Description
source-over Default value. Displays the source over the destination
source-atop Displays the source on top of the destination. The part of the source that is outside the destination object is not shown
source-in Displays the source in to the destination object. Only the part of the source that is inside the destination object is shown, and the destination object is transparent.
source-out Displays the source out of the destination. Only the part of the source that is outside the destination is shown, and the destination object is transparent
destination-over Displays the destination over the source
destination-atop Displays the destination on top of the source. The part of the destination object that is outside the source is not shown
destination-in Displays the destination in to the source. Only the part of the destination that is inside the source is shown, and the source object is transparent
destination-out Displays the destination out of the source. Only the part of the destination that is outside the source is shown, and the source object is transparent
lighter Displays the source object and the destination
copy Displays the source. The destination object is ignored
xor The source is combined with the destination by using an exclusive OR




Example

The following code draws two groups of shapes and sets different composite operation. 


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 80, 50);<!--from   w ww.ja  v  a 2s. co  m-->
    ctx.fillStyle = "blue";  
    ctx.globalCompositeOperation = "source-over";
    ctx.fillRect(50, 50, 80, 50);  
    ctx.fillStyle = "red";
    ctx.fillRect(150, 20, 80, 50);
    ctx.fillStyle = "blue";  
    ctx.globalCompositeOperation = "xor";
    ctx.fillRect(180, 50, 80, 50);  
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to use globalCompositeOperation from canvas context.

It draws compositing on multiple small canvases.


<!--from   w  w w  .  ja  v a  2 s.  c  om-->
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function()
{
   drawShapes("source-over");
   drawShapes("source-in");
   drawShapes("source-out");
   drawShapes("source-atop");
   drawShapes("destination-over");
   drawShapes("destination-in");
   drawShapes("destination-out");
   drawShapes("destination-atop");
   drawShapes("lighter");
   drawShapes("copy");
   drawShapes("xor");
}
function drawShapes(type)
{
   canvas  = document.getElementById(type); 
   context = canvas.getContext("2d"); 

   var squareOffset = 15;  var squareSide   = 70;
   var circleOffset = 73;  var circleRadius = 35; 

   // B3. SQUARE.
   context.fillStyle = "blue";
   context.fillRect(squareOffset,squareOffset,
                    squareSide,  squareSide);

   // B4. COMPOSITE attribute.
   context.globalCompositeOperation = type;

   // B5. CIRCLE.
   context.fillStyle = "red";
   context.beginPath();
   context.arc(circleOffset,circleOffset,circleRadius,
               0,Math.PI*2,true);
   context.fill(); 
}
</script>
<style type="text/css"> td {text-align:center;}
</style> </head> <body>

<table border="0" align="center">
<tr>
<td>  <canvas     id="source-over"      width="120" height="110">
     </canvas><br/><l>source-over</l>
</td>
<td>  <canvas     id="source-in"        width="120" height="110">
     </canvas><br/><l>source-in</l>
</td>
<td>  <canvas     id="source-out"       width="120" height="110">
     </canvas><br/><l>source-out</l>
</td>
<td>  <canvas     id="source-atop"      width="120" height="110">
     </canvas><br/><l>source-atop</l>
</td>
</tr>
<tr>
<td>  <canvas     id="destination-over" width="120" height="110">
     </canvas><br/><l>destination-over</l>
</td>
<td>  <canvas     id="destination-in"   width="120" height="110">
     </canvas><br/><l>destination-in</l>
</td>
<td>  <canvas     id="destination-out"  width="120" height="110">
     </canvas><br/><l>destination-out</l>
</td>
<td>  <canvas     id="destination-atop" width="120" height="110">
     </canvas><br/><l>destination-atop</l>
</td>
</tr>
<tr>
<td>  <canvas     id="lighter"          width="120" height="110">
     </canvas><br/><l>lighter</l>
</td>
<td>  <canvas     id="copy"             width="120" height="110">
     </canvas><br/><l>copy</l>
</td>
<td>  <canvas     id="xor"              width="120" height="110">
     </canvas><br/><l>xor</l>
</td>
</tr>
</table>
</body>
</html>

The code above is rendered as follows: