HTML5 Canvas - Composition

HTML5 canvas provides compositing attribute globalCompositeOperation which affect all the drawing operations.
We can draw new shapes behind existing shapes and mask off certain areas, clear sections from the canvas using globalCompositeOperation attribute as shown below in the example.
There are following values which can be set for globalCompositeOperation −
source-over
This is the default setting and draws new shapes on top of the existing canvas content.
source-in
The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.
source-out
The new shape is drawn where it doesn't overlap the existing canvas content.
source-atop
The new shape is only drawn where it overlaps the existing canvas content.
lighter
Where both shapes overlap the color is determined by adding color values.
xor
Shapes are made transparent where both overlap and drawn normal everywhere else.
destination-over
New shapes are drawn behind the existing canvas content.
destination-in
The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.
destination-out
The existing content is kept where it doesn't overlap the new shape.
destination-atop
The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.
darker
Where both shapes overlap the color is determined by subtracting color values.
Following is a simple example which makes use of globalCompositeOperation attribute to create all possible compositions −
<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         var compositeTypes = [
            'source-over','source-in','source-out','source-atop',
            'destination-over','destination-in','destination-out',
            'destination-atop','lighter','darker','copy','xor'
         ];
         
         function drawShape() {
            for (i=0;i<compositeTypes.length;i++) {
               var label = document.createTextNode(compositeTypes[i]);
               document.getElementById('lab'+i).appendChild(label);
               var ctx = document.getElementById('tut'+i).getContext('2d');
               
               // draw rectangle
               ctx.fillStyle = "#FF3366";
               ctx.fillRect(15,15,70,70);
               
               // set composite property
               ctx.globalCompositeOperation = compositeTypes[i];
               
               // draw circle
               ctx.fillStyle = "#0066FF";
               ctx.beginPath();
               ctx.arc(75,75,35,0,Math.PI*2,true);
               ctx.fill();
            }
         }
      </script>
   </head>
   
   <body onload = "drawShape();">
      <table border = "1" align = "center">
         <tr>
            <td><canvas id = "tut0" width = "125" height = "125"></canvas><br/>
               <label id = "lab0"></label>
            </td>
            
            <td><canvas id = "tut1" width = "125" height = "125"></canvas><br/>
               <label id = "lab1"></label>
            </td>
            
            <td><canvas id = "tut2" width = "125" height = "125"></canvas><br/>
               <label id = "lab2"></label>
            </td>
         </tr>
         
         <tr>
            <td><canvas id = "tut3" width = "125" height = "125"></canvas><br/>
               <label id = "lab3"></label>
            </td>
            
            <td><canvas id = "tut4" width = "125" height = "125"></canvas><br/>
               <label id = "lab4"></label>
            </td>
            
            <td><canvas id = "tut5" width = "125" height = "125"></canvas><br/>
               <label id = "lab5"></label>
            </td>
         </tr>
         
         <tr>
            <td><canvas id = "tut6" width = "125" height = "125"></canvas><br/>
               <label id = "lab6"></label>
            </td>
            
            <td><canvas id = "tut7" width = "125" height = "125"></canvas><br/>
               <label id = "lab7"></label>
            </td>
            
            <td><canvas id = "tut8" width = "125" height = "125"></canvas><br/>
               <label id = "lab8"></label>
            </td>
         </tr>
         
         <tr>
            <td><canvas id = "tut9" width = "125" height = "125"></canvas><br/>
               <label id = "lab9"></label>
            </td>
            
            <td><canvas id = "tut10" width = "125" height = "125"></canvas><br/>
               <label id = "lab10"></label>
            </td>
            
            <td><canvas id = "tut11" width = "125" height = "125"></canvas><br/>
               <label id = "lab11"></label>
            </td>
         </tr>         
      </table>
      
   </body>
</html>
The above example would produce the following result −

    19 Lectures 
     2 hours 

 Anadi Sharma

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    18 Lectures 
     1.5 hours 

 Frahaan Hussain

    57 Lectures 
     5.5 hours 

 DigiFisk (Programming Is Fun)

    54 Lectures 
     6 hours 

 DigiFisk (Programming Is Fun)

    45 Lectures 
     5.5 hours 

 DigiFisk (Programming Is Fun)
 Print
 Add Notes
 Bookmark this page