What is composition in HTML5 Canvas?

Javascript Web Development Front End Scripts

HTML5 canvas provides compositing attribute globalCompositeOperation that affect all the drawing operations.

Example

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.

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         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>

Arjun Thakur

Updated on 28-Jan-2020 06:04:08

Previous Page Print Page Next Page