Summary -

In this topic, we described about the Canvas Composition with detailed example.

HTML5 canvas offers compositing attribute globalCompositeOperation to alter entire the drawing functions. globalCompositeOperation sets or returns how a new drawings/images are drawn on an existing drawings/images.

We can draw fresh shapes on/behind current shapes and mask off some areas, clear sections from the canvas utilizing globalCompositeOperation attributes.

Syntax -

context.globalCompositeOperation="source-attribute";

Note: -

source image/shape = new drawings that are about to place onto the canvas.

destination image/shape = old drawings that are already placed onto the canvas.

The following are the attributes for globalCompositeOperation –

Source-attribute Description
source-over This is the default value if not specified.
Draws/displays source shape on top of the destination shape.
Source-in The source shape is drawn into the destination shape. This only shows the shape that both source and destination shapes overlapped and remaining shapes outside overlap gets cleared.
Source-out Displays the source shape out of the destination shape. This only shows the destination shape that outside the overlap and remaining gets cleared.
Source-atop The source shape is drawn on the destination shape. This only shows the source shape that includes destination shape overlap and remaining destination shape outside source gets cleared.
Lighter Displays the source shape and the destination shape. The overlap area color gets calculated automatically from source and destination shape and displays with the color.
Xor The source shape is combined by using an exclusive OR with the destination shape. i.e. the overlapped portion wont display and remaining portion of the shapes gets displayed.
Destination-over Displays the destination shape on top of the source shape.
Destination-in Displays the destination shape into the source shape. This displays only the destination shape overlapped area with source shape color and remaining area gets cleared.
Destination-out Displays the destination shape out of the source shape.This displays the source shape only that is out of the destination overlap and remaining shapes are gets cleared.
Destination-atop Displays the destination shape on top of the source shape. This displays the overlapped shape + destination shape and remaining shape gets cleared.
Darker Where two shapes overlap the color is defined by deducting color values.

Example-

Below example describes the usage of globalCompositeOperation attribute to produce all possible compositions - 

<!DOCTYPE HTML>
<html>
 <head>
   <script type = "text/javascript">
     var ct = ['source-over','source-in','source-out','source-atop',
     'destination-over','destination-in','destination-out',
     'destination-atop','lighter','darker','copy','xor'];
     function drawImage() { 
       for (i=0;i<ct.length;i++) {
          //Text 
          ctx.font = "16px calibri";
          ctx.fillText(ct[i],10,10);
          var ctx = document.getElementById('comp'+i).getContext('2d');
          // draw rectangle 
          ctx.fillStyle = "#368d9e";
          ctx.beginPath();
          ctx.arc(75,45,35,0,Math.PI*2,true); 
          ctx.fill();
          // set composite property
          ctx.globalCompositeOperation = ct[i];
          // draw circle
          ctx.fillStyle = "#36609e";
          ctx.beginPath();
          ctx.arc(105,75,35,0,Math.PI*2,true);
          ctx.fill();
         }
     } 
   </script>
 </head>
 <body onload = "drawImage();">
   <canvas id = "comp0" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>  
   <canvas id = "comp1" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>
   <canvas id = "comp2" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>
   <canvas id = "comp3" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>
   <canvas id = "comp4" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>
   <canvas id = "comp5" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>
   <canvas id = "comp6" width = "175" height = "120" style="border:2px
   solid #00d3d3;"></canvas>
   <canvas id = "comp7" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>
   <canvas id = "comp8" width = "175" height = "120" style="border:2px 
    solid #00d3d3;"></canvas>
   <canvas id = "comp9" width = "175" height = "120" style="border:2px 
     solid #00d3d3;"></canvas>
   <canvas id = "comp10" width = "175" height = "120" style="border:2px
     solid #00d3d3;"></canvas>
   <canvas id = "comp11" width = "175" height = "120" style="border:2px
     solid #00d3d3;"></canvas>
 </body>
</html>

Output -


Browser Support

Composition property supports all modern browsers, such as Internet Explorer9, Firefox, Opera, Chrome, and Safari.

Note! Internet explorer 8 and earlier versions, do not support the <canvas>element.