Teach with us

What is composition in HTML5 Canvas?

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>
Updated on 28-Jan-2020 06:04:08

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements